{% extends "layout.askama.html" %}

{% block content %}
  <div class="card bg-base-100 shadow-xl mb-8">
    <div class="card-body">
      <h2 class="card-title text-3xl font-bold">Welcome to at://advent!</h2>
      <p class="text-base-content">at://advent is a daily challenge to learn atproto in an interactive way. Similar to the advent of code. There are challenges for you to complete by writing code, but instead of strictly writing code you will be completing the challenges on atproto and learning more about it.</p>
      <p>For this workshop you will be play testing the challenges for the first six days seeing what works well and what may not work. We want your thoughts and feedback about how it goes.</p>

      <div class="divider"></div>

      <h3 class="text-xl font-semibold">Tidbits</h3>
      <ul class="list-disc list-inside space-y-2 text-base-content">
        <li>There will most likely be bugs here and there</li>
        <li>We are going to start day one together and give about 10-15mins for each part or move on when everyone is done.</li>
        <li>Part one is usually a bit easier and part two either builds on the previous parts</li>
        <li>PLEASE feel free to ask questions! We created at://advent to help teach others more about atproto. If you have a question or are stuck on a challenge please raise your hand and ask. Asking questions will also most likely help others!</li>
        <li>If you finish early also please feel free to offer help to neighbors</li>
      </ul>
    </div>
  </div>

  {% if unlocked_days.len() == 0 %}
    <div class="alert alert-info shadow-lg">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      <div>
        <h3 class="font-bold">No days unlocked yet</h3>
        <div class="text-sm">Please check back in December when the challenges begin!</div>
      </div>
    </div>
  {% else %}
    <div class="mb-4">
      <h3 class="text-2xl font-semibold mb-4">Available Challenges</h3>
      <div class="badge badge-primary badge-lg">{{ unlocked_days.len() }} day{% if unlocked_days.len() != 1 %}s{% endif %} unlocked</div>
    </div>

    <style>
      .day-btn-partial {
        background: linear-gradient(135deg, #00a96e 0%, #00a96e 50%, #ff5861 50%, #ff5861 100%) !important;
        color: white;
      }

      .day-btn-partial:hover {
        opacity: 0.9;
      }
    </style>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
      {% for day_status in unlocked_days %}
        {% match day_status.status %}
          {% when shared::advent::CompletionStatus::None %}
            <a href="/day/{{ day_status.day }}" class="btn btn-lg btn-error h-24 flex flex-col hover:scale-105 transition-transform">
              <span class="text-xs opacity-70">Day</span>
              <span class="text-3xl font-bold">{{ day_status.day }}</span>
            </a>
          {% when shared::advent::CompletionStatus::PartOne %}
            <a href="/day/{{ day_status.day }}" class="btn btn-lg day-btn-partial h-24 flex flex-col hover:scale-105 transition-transform">
              <span class="text-xs opacity-70">Day</span>
              <span class="text-3xl font-bold">{{ day_status.day }}</span>
            </a>
          {% when shared::advent::CompletionStatus::Both %}
            <a href="/day/{{ day_status.day }}" class="btn btn-lg btn-success h-24 flex flex-col hover:scale-105 transition-transform">
              <span class="text-xs opacity-70">Day</span>
              <span class="text-3xl font-bold">{{ day_status.day }}</span>
            </a>
        {% endmatch %}
      {% endfor %}
    </div>
  {% endif %}
{% endblock %}