<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>{{ title }}</title>
    
    {% block metaTags %}
    <!-- SEO Meta Tags -->
    <meta name="description" content="Your temporary Inbox. Create instant throwaway email addresses to protect your privacy. No registration required. Emails auto-delete after {{ purgeTimeRaw | readablePurgeTime }}.">
    <meta name="keywords" content="temporary email, disposable email, throwaway email, fake email, temp mail, anonymous email, 48hr email, privacy protection, burner email">
    <meta name="author" content="{{ branding.1 }}">
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow">
    <link rel="canonical" href="{{ config.http.baseUrl }}/">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ config.http.baseUrl }}/">
    <meta property="og:title" content="{{ branding.0 }} - Your temporary Inbox">
    <meta property="og:description" content="Protect your privacy with free temporary email addresses. No registration required. Emails auto-delete after {{ purgeTimeRaw | readablePurgeTime }}.">
    <meta property="og:image" content="{{ config.http.baseUrl }}/images/logo.png">
    <meta property="og:site_name" content="{{ branding.0 }}">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:url" content="{{ config.http.baseUrl }}/">
    <meta name="twitter:title" content="{{ branding.0 }} - Your temporary Inbox">
    <meta name="twitter:description" content="Free temporary email service. Protect your privacy with disposable email addresses.">
    <meta name="twitter:image" content="{{ config.http.baseUrl }}/images/logo.png">
    {% endblock %}
    
    <!-- Additional Meta Tags -->
    <meta name="theme-color" content="#9b4dca">
    <meta name="darkreader-lock">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="48hr.email">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <link rel="shortcut icon" href="/images/favicon.ico">
    <link rel="apple-touch-icon" href="/images/logo.png">
    
    <!-- Stylesheets -->
    <link rel='stylesheet' href='/dependencies/milligram.css' />
    <link rel='stylesheet' href='/stylesheets/custom.css' />
    
    <!-- Structured Data for SEO -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "48hr.email",
      "url": "https://48hr.email",
      "description": "Your temporary Inbox service for privacy protection",
      "applicationCategory": "UtilitiesApplication",
      "operatingSystem": "Any",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      },
      "author": {
        "@type": "Organization",
        "name": "CrazyCo",
        "url": "https://crazyco.xyz"
      }
    }
    </script>

    <!-- Scripts -->
    <script src="/javascripts/utils.js"></script>
    <script src="/socket.io/socket.io.js" defer="true"></script>
    <script src="/javascripts/notifications.js" defer="true"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" defer="true"></script>
    <script src="/javascripts/stats.js" defer="true"></script>

  </head>
  <body{% if bodyClass %} class="{{ bodyClass }}"{% endif %}>
  <main>
    <div class="header">
      <a href="/" aria-label="48hr.email home">
        <img src="/images/logo.png" class="logo" alt="48hr.email logo" style="max-width: 75px">
      </a>
      {% block header %}{% endblock %}
    </div>
    {% if alertMessage %}
      <div class="container" style="margin-top: 1rem;">
        <div class="alert alert-warning" style="font-size: 0.85rem;">
          {{ alertMessage }}
        </div>
      </div>
    {% endif %}
    {% block body %}{% endblock %}
  </main>

    {% block footer %}
    <section class="container footer">
      <hr>
      {% include '_footer-main.twig' %}
      <h4 class="container footer-two">
        This project is <a href="https://github.com/crazyco-xyz/48hr.email" style="text-decoration:underline" target="_blank">open-source ♥</a>
      </h4>
    </section>
    {% endblock %}


  </body>
</html>
