<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>🎄 Syllables of the Season 🎄</title>

    <!-- Google font (optional) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

    <style>
      :root{
        --bg: #0f1720;
        --card: #0b1220aa;
        --muted: #9aa5b1;
        --accent: #d97706;
        --accent-2: #ef4444;
        --glass: rgba(255,255,255,0.04);
        --radius: 12px;
      }

      *{box-sizing:border-box}
      html,body{height:100%;}
      body{
        margin:0;
        font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
        background: linear-gradient(180deg, #071428 0%, #091627 60%);
        color: #eef2f7;
        padding:1rem;
        display:flex;
        justify-content:center;
      }

      .container{width:100%; max-width:900px;}
      header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
      h1{font-size:1.25rem;margin:0;display:flex;align-items:center;gap:.6rem}
      nav a{color:var(--muted);text-decoration:none;margin-left:.75rem;font-weight:600}

      /* small festive icon */
      .logo-emoji{font-size:1.4rem}

      main{
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        padding:1rem;
        border-radius:var(--radius);
        box-shadow: 0 6px 30px rgba(2,6,23,0.6);
      }

      .card{background:var(--glass); padding:1rem; border-radius:10px; margin-bottom:1rem}
      form{display:grid; gap:.75rem}
      label{font-weight:600; color:#f8fafc}
      input[type=text], input[type=number]{width:100%; padding:.8rem; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:inherit}
      button{padding:.75rem 1rem;border-radius:10px;border:none;font-weight:700;cursor:pointer}
      .btn-accent{background:linear-gradient(90deg,var(--accent), #ffd580); color:#111}
      .btn-muted{background:transparent;border:1px solid rgba(255,255,255,0.06); color:var(--muted)}

      table{width:100%;border-collapse:collapse;margin-top:.5rem}
      th,td{padding:.6rem;text-align:left;border-bottom:1px solid rgba(255,255,255,0.05);font-size:.95rem}

      .flash{padding:.6rem .8rem;border-radius:8px;margin-bottom:.75rem}
      .flash.success{background:rgba(16,185,129,0.12); color:#b7f2d9}
      .flash.error{background:rgba(239,68,68,0.08); color:#ffd8d8}

      .photo-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
      .photo {
        flex: 0 1 200px;   /* set width of each photo card */
        max-width: 200px;
        border-radius: 8px;
        overflow: hidden;
      }
      .photo img{width:100%;height:100%;object-fit:cover;display:block}

      /* responsive */
      @media (max-width:720px){
        .photo{flex:1 1 calc(50% - .5rem)}
        header{gap:.5rem}
        h1{font-size:1rem}
      }

      footer{font-size:.85rem;color:var(--muted);text-align:center;margin-top:.75rem}
    </style>
  </head>

  <body>
    <div class="container">
      <header>
        <h1><span class="logo-emoji">🎄</span> Syllables of the Season <span class="logo-emoji">🎄</span></h1>
        <nav>
          <a href="{{ url_for('submit_form') }}">Submit</a>
        </nav>
      </header>

      {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
          {% for category, message in messages %}
            <div class="flash {{ category }}">{{ message }}</div>
          {% endfor %}
        {% endif %}
      {% endwith %}

      <main>
        {% block content %}{% endblock %}
      </main>

      <footer>
        Have fun and good luck! 🎁
      </footer>
    </div>
  </body>
</html>
