{% extends 'layout.html.twig' %}

{% block body %}
  <h1>Attach Articles</h1>

  {{ form_start(form) }}

  {% for cat in form.categories %}
    <fieldset class="mb-3">
        <div class="card-title mb-3">{{ form_row(cat.title) }}</div>
        <div
          {{ stimulus_controller('form-collection') }}
          data-form-collection-index-value="{{ cat.articles|length > 0 ? cat.articles|last.vars.name + 1 : 0 }}"
          data-form-collection-prototype-value="{{ form_widget(cat.articles.vars.prototype)|e('html_attr') }}">
          <label class="form-label">Article coordinates</label>
          <ul {{ stimulus_target('form-collection', 'collectionContainer') }} class="list-unstyled">
            {% for art in cat.articles %}
              <li class="mb-2">{{ form_widget(art, {attr: {placeholder: 'kind:pubkey|npub:slug'}}) }}</li>
            {% endfor %}
          </ul>
          <button class="btn btn-sm btn-secondary" type="button" {{ stimulus_action('form-collection', 'addCollectionElement') }}>Add coordinate</button>
        </div>
    </fieldset>
  {% endfor %}

  <div class="mt-3 d-flex flex-row gap-2">
    <a class="btn btn-secondary" href="{{ path('mag_wizard_cancel') }}">Cancel</a>
    <button class="btn btn-primary">Next: Review & Sign</button>
  </div>

  {{ form_end(form) }}
{% endblock %}