{% load app_tags %}


{# Track Episode Modal #}
<div x-show="trackOpen"
     @keydown.escape.window="trackOpen = false"
     class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="w-[400px] max-h-[90vh] px-4 md:px-0 relative z-60"
       @click.outside="trackOpen = false">
    <div class="bg-[#2a2f35] p-6 rounded-lg max-h-[70svh] overflow-y-auto">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-white">Track Episode</h2>
        <button class="text-gray-400 hover:text-white transition-colors cursor-pointer"
                @click="trackOpen = false">{% include "app/icons/x.svg" with classes="w-5 h-5" %}</button>
      </div>

      {# Episode preview data #}
      <div class="bg-[#343a40] rounded-lg p-4 mb-6">
        <div class="flex items-start gap-4">
          <img alt="{{ episode.title }}"
               class="w-20 h-20 rounded object-cover shrink-0"
               src="{{ episode.image }}">
          <div>
            <h3 class="text-lg font-semibold mb-1 line-clamp-1">{{ episode_title }}</h3>
            <p class="text-sm text-gray-400">Episode {{ episode.episode_number }}</p>
            {% if episode.history %}
              {% if episode.history|length == 1 %}
                <p class="text-sm text-gray-400 mt-1">Watched once</p>
              {% else %}
                <p class="text-sm text-gray-400 mt-1">Watched {{ episode.history|length }} times</p>
              {% endif %}
            {% else %}
              <p class="text-sm text-gray-400 mt-1">Not watched yet</p>
            {% endif %}
          </div>
        </div>
      </div>

      {# Episode form #}
      <div class="space-y-4">

        {% if episode.history %}
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-3">Previous Watches</label>
            <div class="max-h-[200px] overflow-y-auto space-y-2">

              {% for entry in episode.history %}
                <div class="flex items-center justify-between bg-[#343a40] rounded-md p-3 border border-gray-600">
                  <div class="text-sm text-white">
                    {{ entry.end_date|datetime_format:request.user }}
                    {% if not entry.end_date %}No date provided{% endif %}
                  </div>
                  <form method="post"
                        action="{% url 'media_delete' %}?next={{ request.path }}">
                    {% csrf_token %}
                    <input type="hidden" name="instance_id" value="{{ entry.id }}">
                    <input type="hidden" name="media_type" value="episode">
                    <button class="text-red-400 hover:text-red-300 transition-colors text-sm px-2 py-1 hover:bg-red-600/20 rounded-md cursor-pointer">
                      Delete
                    </button>
                  </form>
                </div>
              {% endfor %}
            </div>
          </div>

          <div class="border-t border-gray-600 my-6"></div>
        {% endif %}

        <form method="post"
              action="{% url 'episode_save' %}?next={{ request.path }}">
          {% csrf_token %}
          <input type="hidden" name="media_id" value="{{ media.media_id }}">
          <input type="hidden" name="season_number" value="{{ media.season_number }}">
          <input type="hidden" name="source" value="{{ media.source }}">
          <input type="hidden"
                 name="episode_number"
                 value="{{ episode.episode_number }}">

          <label class="block text-sm font-medium text-gray-300 mb-2">Watch Date</label>

          {# djlint:off #}
          <div class="relative" x-data="{ 
              inputDateTime: '{% if TRACK_TIME %}{% now "Y-m-d\TH:i" %}{% else %}{% now "Y-m-d" %}{% endif %}',
              inputType: '{% if TRACK_TIME %}datetime-local{% else %}date{% endif %}'
          }">
            <input class="w-full p-3 bg-[#343a40] rounded-md text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-[#4a9eff] appearance-none"
                   x-bind:type="inputType"
                   name="end_date"
                   onfocus="this.showPicker?.()"
                   x-model="inputDateTime">
            {% if episode.air_date %}
              <button type="button"
                      @click="inputDateTime = inputType === 'datetime-local' ? '{{ episode.air_date }}T{% now "H:i" %}' : '{{ episode.air_date }}'"
                      class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center text-sm text-indigo-400 hover:text-indigo-300 transition-colors bg-[#2a2f35] px-2 py-1 rounded cursor-pointer">
                {% include "app/icons/calendar.svg" with classes="w-4 h-4 mr-1" %}
                Air date
              </button>
            {% endif %}
          </div>
          {# djlint:on #}

          <div class="flex justify-end-safe gap-3 mt-6">
            <button type="submit"
                    class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors cursor-pointer">
              Add watch
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
