<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cosmic Cupcake Stand</title>
    <style>
      body {
        background: #080a1c;
        color: #f7f7ff;
        font-family: 'Segoe UI', Tahoma, sans-serif;
        margin: 0;
        padding: 2rem;
      }
      .card {
        background: #11142d;
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        max-width: 900px;
        margin: auto;
      }
      h1 {
        font-size: 2.5rem;
        margin-top: 0;
      }
      .featured {
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        background: linear-gradient(135deg, #ff7eb3, #6229ff);
      }
      .limited {
        border: 1px dashed rgba(255, 255, 255, 0.4);
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        background: rgba(255, 255, 255, 0.04);
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
      }
      .grid article {
        background: rgba(17, 20, 45, 0.85);
        border-radius: 10px;
        padding: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      ul {
        list-style: none;
        padding: 0;
      }
      li {
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
      .badge {
        display: inline-block;
        font-size: 0.75rem;
        padding: 0.1rem 0.5rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.2);
        margin-left: 0.5rem;
      }
      footer {
        margin-top: 2rem;
        font-size: 0.85rem;
        text-align: center;
        color: rgba(255, 255, 255, 0.65);
      }
      a {
        color: #ffdc7b;
      }
    </style>
  </head>
  <body>
    <main class="card">
      <h1>Cosmic Cupcake Stand</h1>
      <p>
        Welcome to the Galactic Bakeshop pop up! Each refresh beams down a
        featured cupcake. Make it your own by editing
        <code>treats/views.py</code>, <code>treats/menu.py</code>, and
        <code>treats/templates/treats/home.html</code>.
      </p>
      <p>
        Cheapest bite on the board right now:
        <strong>{{ cheapest.name }}</strong> at ${{ cheapest.price }} 🌌
      </p>

      <section class="featured">
        <h2>{{ featured.emoji }} Featured Treat: {{ featured.name }}</h2>
        <p>{{ featured.flavor_notes|title }}</p>
        <p>
          <strong>${{ featured.price }}</strong>
          {% if featured.galaxy %}<span class="badge">{{ featured.galaxy }}</span>{% endif %}
        </p>
      </section>

      {% if limited_specials %}
      <section class="limited">
        <h3>Limited Orbit Specials</h3>
        <p>Gone after this class session!</p>
        <div class="grid">
          {% for cupcake in limited_specials %}
          <article>
            <h4>{{ cupcake.emoji }} {{ cupcake.name }}</h4>
            <p>{{ cupcake.flavor_notes|title }}</p>
            <p><strong>${{ cupcake.price }}</strong></p>
          </article>
          {% endfor %}
        </div>
      </section>
      {% endif %}

      <h3>Full Menu</h3>
      <ul>
        {% for cupcake in cupcakes %}
        <li>
          <strong>{{ cupcake.emoji }} {{ cupcake.name }}</strong>
          {% if cupcake.galaxy %}<span class="badge">{{ cupcake.galaxy }}</span>{% endif %}<br />
          {{ cupcake.flavor_notes }} — <em>${{ cupcake.price }}</em>
          {% if cupcake.is_limited %}<span class="badge">Limited</span>{% endif %}
        </li>
        {% endfor %}
      </ul>

      <footer>
        Page generated at {{ generated_at }} UTC ·
        <a href="https://docs.djangoproject.com/">Powered by Django</a>
      </footer>
    </main>
  </body>
</html>
