{% load app_tags %}

{% include "app/components/messages/messages_oob.html" %}

<div class="flex items-center justify-center space-x-4 pb-3">
  <button class="p-1 bg-gray-700 hover:bg-gray-600 rounded-md transition-colors cursor-pointer disabled:opacity-50 disabled:hover:bg-gray-700 disabled:cursor-not-allowed"
          {% if media.progress == 0 %}disabled{% endif %}
          hx-post="{% url 'progress_edit' media.item.media_type media.id %}"
          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
          hx-vals='{"operation": "decrease", "home_status": "{{ home_status }}"}'
          hx-swap="innerHTML"
          hx-target="#progress-{{ media.item.media_type }}-{{ media.id }}">
    {% include "app/icons/minus.svg" with classes="w-3 h-3" %}
  </button>

  <div class="text-xs text-indigo-400 font-medium min-w-[4ch] text-center">
    {{ media.formatted_progress }}

    {% if media.item.media_type != MediaTypes.GAME.value and media.item.media_type != MediaTypes.MOVIE.value %}
      {% if media.max_progress %}
        / {{ media.max_progress }} {{ media.item.media_type|long_unit }}{{ media.max_progress|pluralize }}
      {% else %}
        {{ media.item.media_type|long_unit }}{{ media.progress|pluralize }}
      {% endif %}
    {% endif %}
  </div>

  <button class="p-1 bg-gray-700 hover:bg-gray-600 rounded-md transition-colors cursor-pointer disabled:opacity-50 disabled:hover:bg-gray-700 disabled:cursor-not-allowed"
          {% if media.progress == media.max_progress %}disabled{% endif %}
          hx-post="{% url 'progress_edit' media.item.media_type media.id %}"
          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
          hx-vals='{"operation": "increase", "home_status": "{{ home_status }}"}'
          hx-swap="innerHTML"
          hx-target="#progress-{{ media.item.media_type }}-{{ media.id }}">
    {% include "app/icons/plus.svg" with classes="w-3 h-3" %}
  </button>
</div>
{% include "app/components/progress_bar.html" with media=media user=user %}