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

{% block breadcrumbs %}<span class="crumb">{% trans "Site" %}</span><span class="sep">/</span><span class="crumb is-current">{% trans "Layouts" %}</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">{% trans "Layouts" %}</h1>
      <p class="madga-page-subtitle">{% blocktrans %}Choose how each page type renders on the public site. The selection is persisted in <code>Site.settings</code>; templates resolve the suffix automatically.{% endblocktrans %}</p>
    </div>
  </div>

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

    {% for kind, options in groups.items %}
      <div class="madga-card madga-layout-group">
        <h2 class="madga-layout-group-title">
          {% if kind == "home" %}{% trans "Homepage" %}
          {% elif kind == "list" %}{% trans "Blog index" %}
          {% elif kind == "detail" %}{% trans "Post detail" %}
          {% elif kind == "page" %}{% trans "Static pages" %}
          {% endif %}
        </h2>

        <div class="madga-layout-grid">
          {% for value, label, desc in options %}
            <label class="madga-layout-tile {% if selection|get_item:kind == value %}is-active{% endif %}">
              <input type="radio" name="layout_{{ kind }}" value="{{ value }}"
                     {% if selection|get_item:kind == value %}checked{% endif %}>
              <span class="madga-layout-tile-name">{{ label }}</span>
              <span class="madga-layout-tile-desc">{{ desc }}</span>
              <span class="madga-layout-tile-active">{% trans "In use" %}</span>
            </label>
          {% endfor %}
        </div>
      </div>
    {% endfor %}

    <div style="display:flex; gap:8px; margin-top:18px;">
      <button type="submit" class="madga-btn madga-btn--primary">{% trans "Save layouts" %}</button>
    </div>
  </form>
</div>
{% endblock %}