{% extends "madga/studio/base.html" %}
{% load i18n madga_studio_tags %}

{% block breadcrumbs %}<span class="crumb">Site</span><span class="sep">/</span><span class="crumb is-current">Homepage</span>{% endblock %}

{% block content %}
<div class="madga-page" style="max-width:880px;">
  <div class="madga-page-header">
    <div class="madga-page-title-block">
      <h1 class="madga-page-title">Homepage</h1>
      <p class="madga-page-subtitle">Bloques que aparecen en la home, en orden. Mové con las flechitas y desactivá un bloque sin borrarlo con el switch.</p>
    </div>
    <div class="madga-page-actions">
      <a href="/" target="_blank" rel="noopener" class="madga-btn madga-btn--sm madga-btn--ghost">
        {% studio_icon "external" size=12 stroke=2 %} Ver homepage
      </a>
    </div>
  </div>

  {# Add-block tray (driven by registered block types) ------------------- #}
  <div class="madga-hb-add">
    <div class="madga-hb-add-title">Añadir un bloque</div>
    <div class="madga-hb-add-grid">
      {% for bt in block_types %}
        <form method="post" class="madga-hb-add-tile-form">
          {% csrf_token %}
          <input type="hidden" name="action" value="create">
          <input type="hidden" name="block_type" value="{{ bt.key }}">
          <button type="submit" class="madga-hb-add-tile">
            <span class="madga-hb-add-tile-name">{{ bt.label }}</span>
            <span class="madga-hb-add-tile-desc">{{ bt.description }}</span>
          </button>
        </form>
      {% endfor %}
    </div>
  </div>

  {# Existing blocks ----------------------------------------------------- #}
  <div class="madga-hb-list" data-madga-sortable data-reorder-url="{% url 'madga_studio:homepage_builder' %}">
    {% for row in blocks %}
      {% with b=row.obj %}
      <div class="madga-hb-block" data-pk="{{ b.pk }}">
        <header class="madga-hb-block-head">
          <span class="madga-hb-drag-handle" title="Arrastrá para reordenar">{% studio_icon "more-v" size=14 stroke=2 %}{% studio_icon "more-v" size=14 stroke=2 %}</span>
          <div class="madga-hb-block-meta">
            <span class="madga-hb-block-type">{{ row.label }}</span>
            {% if not b.is_visible %}<span class="madga-hb-block-hidden">Oculto</span>{% endif %}
            <span class="madga-hb-block-desc">{{ row.description }}</span>
          </div>
          <div class="madga-hb-block-actions">
            <form method="post" style="display:inline;">{% csrf_token %}
              <input type="hidden" name="action" value="move_up"><input type="hidden" name="pk" value="{{ b.pk }}">
              <button type="submit" class="madga-icon-btn" title="Mover arriba" {% if row.is_first %}disabled{% endif %}>{% studio_icon "chevron-up" size=14 stroke=2 %}</button>
            </form>
            <form method="post" style="display:inline;">{% csrf_token %}
              <input type="hidden" name="action" value="move_down"><input type="hidden" name="pk" value="{{ b.pk }}">
              <button type="submit" class="madga-icon-btn" title="Mover abajo" {% if row.is_last %}disabled{% endif %}>{% studio_icon "chevron-down" size=14 stroke=2 %}</button>
            </form>
            <form method="post" style="display:inline;">{% csrf_token %}
              <input type="hidden" name="action" value="toggle_visibility"><input type="hidden" name="pk" value="{{ b.pk }}">
              <button type="submit" class="madga-icon-btn" title="{% if b.is_visible %}Ocultar{% else %}Mostrar{% endif %}">
                {% if b.is_visible %}{% studio_icon "eye" size=14 stroke=2 %}{% else %}{% studio_icon "eye" size=14 stroke=2 css_class="madga-hb-eye-off" %}{% endif %}
              </button>
            </form>
            <form method="post" style="display:inline;">{% csrf_token %}
              <input type="hidden" name="action" value="delete"><input type="hidden" name="pk" value="{{ b.pk }}">
              <button type="submit" class="madga-icon-btn" title="Borrar" data-madga-confirm="¿Borrar este bloque?">{% studio_icon "trash" size=14 stroke=2 %}</button>
            </form>
          </div>
        </header>
        {% if row.type %}
        <form method="post" class="madga-hb-block-body">
          {% csrf_token %}
          <input type="hidden" name="action" value="update">
          <input type="hidden" name="pk" value="{{ b.pk }}">
          {% for f in row.fields_html %}
            <div class="madga-field">
              <label class="madga-field-label">{{ f.label }}</label>
              {{ f.html }}
              {% if f.help_text %}<span class="madga-field-help">{{ f.help_text }}</span>{% endif %}
            </div>
          {% endfor %}
          <label class="madga-hb-visible">
            <input type="checkbox" name="is_visible" {% if b.is_visible %}checked{% endif %}>
            <span>Bloque visible en la homepage</span>
          </label>
          <div class="madga-hb-block-foot">
            <button type="submit" class="madga-btn madga-btn--sm madga-btn--primary">{% trans "Guardar cambios" %}</button>
          </div>
        </form>
        {% else %}
        <div class="madga-hb-block-body">
          <p style="color:var(--fg-3); font-size:12.5px;">El tipo "{{ b.block_type }}" no está registrado. Borralo o restaurá el tipo en código.</p>
        </div>
        {% endif %}
      </div>
      {% endwith %}
    {% empty %}
      {% studio_empty title="Homepage vacía" message="Añadí tu primer bloque desde el panel de arriba." %}
    {% endfor %}
  </div>
</div>
{% endblock %}