{% extends 'backlogger/base.html' %}

{% block title %}{{ action }} Item — Backlogger{% endblock %}

{% block styles %}
<style>
  .container { max-width: 520px; margin: 3rem auto; padding: 0 1.5rem; }

  .card { background: #0a0f1e; border: 1px solid #1e293b; border-radius: 12px; padding: 2rem; }
  h1 { font-size: 1.35rem; margin-bottom: 1.75rem; letter-spacing: -0.02em; }

  .field { margin-bottom: 1.25rem; }
  .field input[type="range"] { width: 100%; accent-color: #38bdf8; cursor: pointer; margin-top: 0.2rem; }
  .progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; }
  .progress-val { color: #38bdf8; font-variant-numeric: tabular-nums; font-size: 0.9rem; }

  .checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
  .checkbox-row input[type="checkbox"] { accent-color: #38bdf8; width: 1rem; height: 1rem; cursor: pointer; }
  .checkbox-row label { font-size: 0.9rem; color: #e2e8f0; text-transform: none; letter-spacing: 0; margin-bottom: 0; }

  .section-divider { border: none; border-top: 1px solid #1e293b; margin: 1.5rem 0 1.25rem; }
  .section-title { font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
  .optional { color: #475569; font-size: 0.7rem; margin-left: 0.3rem; text-transform: none; letter-spacing: 0; }

  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

  .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
  .btn { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
</style>
{% endblock %}

{% block nav %}
<a href="{% url 'backlogger:list' %}">&larr; Back to backlogger</a>
{% endblock %}

{% block content %}
<div class="container">
  <div class="card">
    <h1>{{ action }} item</h1>

    <form method="post">
      {% csrf_token %}

      <div class="field">
        <label for="{{ form.category.id_for_label }}">Category</label>
        {{ form.category }}
        {{ form.category.errors }}
      </div>

      <div class="field">
        <label for="{{ form.name.id_for_label }}">Name</label>
        {{ form.name }}
        {{ form.name.errors }}
      </div>

      <div class="field" data-hide-status="unending">
        <div class="progress-label">
          <label for="{{ form.progress_percent.id_for_label }}">Progress</label>
          <span class="progress-val" id="progress-display">{{ form.progress_percent.value|default:0|floatformat:0 }}%</span>
        </div>
        {{ form.progress_percent }}
        {{ form.progress_percent.errors }}
      </div>

      <div class="field">
        <div class="checkbox-row">
          {{ form.favorite }}
          <label for="{{ form.favorite.id_for_label }}">Mark as favorite</label>
        </div>
      </div>

      <div class="cat-section" data-show-category="games">
        <hr class="section-divider">
        <div class="section-title">Games</div>
        <div class="two-col">
          <div class="field">
            <label>Hours played</label>
            {{ form.hours_played }}
            {{ form.hours_played.errors }}
          </div>
          <div class="field" data-hide-status="unending">
            <label>Total hours <span class="optional">optional</span></label>
            {{ form.total_hours }}
            {{ form.total_hours.errors }}
            {% if item.hltb_main or item.hltb_extra or item.hltb_complete %}
            <div style="margin-top:0.4rem;font-size:0.72rem;color:#475569;line-height:1.6">
              HowLongToBeat:
              {% if item.hltb_main %}<span style="color:#64748b">Main {{ item.hltb_main|floatformat:0 }}h</span>{% endif %}
              {% if item.hltb_extra %}<span style="color:#64748b"> · +Extra {{ item.hltb_extra|floatformat:0 }}h</span>{% endif %}
              {% if item.hltb_complete %}<span style="color:#64748b"> · 100% {{ item.hltb_complete|floatformat:0 }}h</span>{% endif %}
            </div>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="cat-section" data-show-category="books">
        <hr class="section-divider">
        <div class="section-title">Books</div>
        <div class="two-col">
          <div class="field">
            <label>Pages read</label>
            {{ form.pages_read }}
            {{ form.pages_read.errors }}
          </div>
          <div class="field">
            <label>Total pages <span class="optional">optional</span></label>
            {{ form.total_pages }}
            {{ form.total_pages.errors }}
          </div>
        </div>
      </div>

      <div class="cat-section" data-show-category="films">
        <hr class="section-divider">
        <div class="section-title">Films</div>
        <div class="two-col">
          <div class="field" style="display:flex;align-items:center;padding-top:1.5rem;">
            <div class="checkbox-row">
              {{ form.watched }}
              <label for="{{ form.watched.id_for_label }}">Watched</label>
            </div>
          </div>
          <div class="field">
            <label>Duration (min) <span class="optional">optional</span></label>
            {{ form.duration_minutes }}
            {{ form.duration_minutes.errors }}
          </div>
        </div>
      </div>

      <div class="actions">
        <a href="{% url 'backlogger:list' %}" class="btn btn-ghost">Cancel</a>
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const catSelect = document.getElementById('{{ form.category.id_for_label }}');
  const progressRange = document.getElementById('{{ form.progress_percent.id_for_label }}');
  const progressDisplay = document.getElementById('progress-display');
  const itemStatus = '{{ item.status|default:"active" }}';

  function updateVisibility() {
    const cat = catSelect.value;
    document.querySelectorAll('[data-show-category]').forEach(el => {
      el.style.display = el.dataset.showCategory === cat ? 'block' : 'none';
    });
    document.querySelectorAll('[data-hide-status]').forEach(el => {
      el.style.display = el.dataset.hideStatus === itemStatus ? 'none' : '';
    });
  }

  catSelect.addEventListener('change', updateVisibility);
  updateVisibility();

  progressRange.addEventListener('input', function() {
    progressDisplay.textContent = Math.round(this.value) + '%';
  });
</script>
{% endblock %}