{% extends '_layouts/cp' %}
{% import '_includes/forms.twig' as forms %}

{% set title = 'Homepage Layout'|t('homepage-layout') %}
{% set selectedSubnavItem = 'settings' %}

{% block actionButton %}
  <button type="submit" class="btn submit" form="homepage-layout-form">
    {{ 'Save'|t('app') }}
  </button>
{% endblock %}

{% block content %}
  <form id="homepage-layout-form" method="post" accept-charset="UTF-8" action="{{ actionUrl('homepage-layout/settings/save') }}">
    {{ csrfInput() }}

    <h2>{{ 'Grille'|t('homepage-layout') }}</h2>

    <div class="homepage-layout-grid-settings">
      {{ forms.textField({
        label: 'Hauteur desktop'|t('homepage-layout'),
        instructions: 'Valeur CSS utilisee par md:auto-rows, par exemple 20rem.'|t('homepage-layout'),
        name: 'desktopRowHeight',
        value: settings.desktopRowHeight,
        required: true
      }) }}

      {{ forms.textField({
        label: 'Hauteur grand ecran'|t('homepage-layout'),
        instructions: 'Valeur CSS utilisee par lg:auto-rows, par exemple 22rem.'|t('homepage-layout'),
        name: 'largeDesktopRowHeight',
        value: settings.largeDesktopRowHeight,
        required: true
      }) }}
    </div>

    <h2>{{ 'Tailles disponibles'|t('homepage-layout') }}</h2>

    <div class="homepage-layout-sizes">
      {% for key, size in settings.widthSizes %}
        <div class="homepage-layout-size">
          {{ forms.textField({
            label: 'Libelle largeur'|t('homepage-layout') ~ ' ' ~ key,
            name: 'widthSizes[' ~ key ~ '][label]',
            value: size.label
          }) }}

          {{ forms.selectField({
            label: 'Colonnes desktop'|t('homepage-layout'),
            name: 'widthSizes[' ~ key ~ '][span]',
            value: size.span,
            options: [
              { label: '2 colonnes', value: 2 },
              { label: '4 colonnes', value: 4 },
              { label: '6 colonnes', value: 6 }
            ]
          }) }}
        </div>
      {% endfor %}

      {% for key, size in settings.heightSizes %}
        <div class="homepage-layout-size">
          {{ forms.textField({
            label: 'Libelle hauteur'|t('homepage-layout') ~ ' ' ~ key,
            name: 'heightSizes[' ~ key ~ '][label]',
            value: size.label
          }) }}

          {{ forms.selectField({
            label: 'Niveaux de hauteur'|t('homepage-layout'),
            name: 'heightSizes[' ~ key ~ '][rows]',
            value: size.rows,
            options: [
              { label: '1 niveau', value: 1 },
              { label: '2 niveaux', value: 2 }
            ]
          }) }}
        </div>
      {% endfor %}
    </div>

    <hr>

    <h2>{{ 'Blocs homepage'|t('homepage-layout') }}</h2>

    <p class="light">
      {{ 'Glissez les blocs pour definir leur ordre. Creez une section Craft par rubrique a remonter, notamment edito1 et edito2 pour les blocs de texte.'|t('homepage-layout') }}
    </p>

    <div id="homepage-layout-blocks" class="homepage-layout-blocks">
      {% for block in settings.blocks %}
        {% set index = loop.index0 %}
        <div class="homepage-layout-block" data-block>
          <div class="homepage-layout-block-header">
            <span class="move icon" title="{{ 'Move'|t('app') }}"></span>
            <strong>{{ block.title ?: block.sectionHandle }}</strong>
          </div>

          <input type="hidden" name="blocks[{{ index }}][uid]" value="{{ block.uid ?? block.sectionHandle }}">

          <div class="homepage-layout-block-fields">
            {{ forms.lightswitchField({
              label: 'Actif'|t('homepage-layout'),
              name: 'blocks[' ~ index ~ '][enabled]',
              on: block.enabled ?? true
            }) }}

            {{ forms.selectField({
              label: 'Type de bloc'|t('homepage-layout'),
              name: 'blocks[' ~ index ~ '][type]',
              value: block.type ?? 'entries',
              options: [
                { label: 'Articles', value: 'entries' },
                { label: 'Editorial texte', value: 'editorial' }
              ]
            }) }}

            {{ forms.selectField({
              label: 'Section Craft'|t('homepage-layout'),
              name: 'blocks[' ~ index ~ '][sectionHandle]',
              value: block.sectionHandle ?? '',
              options: sectionOptions
            }) }}

            {{ forms.textField({
              label: 'Intitule affiche'|t('homepage-layout'),
              name: 'blocks[' ~ index ~ '][title]',
              value: block.title ?? ''
            }) }}

            {{ forms.textField({
              label: 'Nombre d’articles'|t('homepage-layout'),
              name: 'blocks[' ~ index ~ '][limit]',
              type: 'number',
              min: 1,
              value: block.limit ?? 1
            }) }}

            {{ forms.selectField({
              label: 'Largeur'|t('homepage-layout'),
              name: 'blocks[' ~ index ~ '][width]',
              value: block.width ?? 'medium',
              options: widthOptions
            }) }}

            {{ forms.selectField({
              label: 'Hauteur'|t('homepage-layout'),
              name: 'blocks[' ~ index ~ '][height]',
              value: block.height ?? 'short',
              options: heightOptions
            }) }}
          </div>
        </div>
      {% endfor %}
    </div>
  </form>

  {% js %}
    const container = document.getElementById('homepage-layout-blocks');

    if (container && window.Garnish) {
      new Garnish.DragSort(container.children, {
        handle: '.move',
        axis: Garnish.Y_AXIS,
        collapseDraggee: true,
        onSortChange: function() {
          Array.from(container.querySelectorAll('[data-block]')).forEach((block, index) => {
            block.querySelectorAll('[name]').forEach((input) => {
              input.name = input.name.replace(/blocks\[\d+]/, 'blocks[' + index + ']');
            });
          });
        }
      });
    }
  {% endjs %}

  {% css %}
    .homepage-layout-grid-settings,
    .homepage-layout-sizes,
    .homepage-layout-block-fields {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
    }

    .homepage-layout-blocks {
      display: grid;
      gap: 14px;
      margin-top: 16px;
    }

    .homepage-layout-block {
      border: 1px solid var(--hairline-color);
      border-radius: 6px;
      padding: 16px;
      background: var(--gray-050);
    }

    .homepage-layout-block-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .homepage-layout-block-header .move {
      cursor: grab;
    }
  {% endcss %}
{% endblock %}