{% macro photoFieldset(index) %}
{% call fieldset({
  classes: "fieldset--group"
}) %}
  {{ fileInput({
    field: {
      attributes: {
        endpoint: application.mediaEndpoint
      }
    },
    name: "photo[" + index + "][url]",
    type: "url",
    value: fieldData("photo[" + index + "].url").value,
    label: __("posts.form.media.label"),
    accept: "image/*",
    attributes: {
      placeholder: "https://"
    },
    errorMessage: fieldData("photo[" + index + "].url").errorMessage
  }) | indent(2) }}

  {{ textarea({
    name: "photo[" + index + "][alt]",
    value: fieldData("photo[" + index + "].alt").value,
    label: __("posts.form.mp-photo-alt.label"),
    rows: 3,
    errorMessage: fieldData("photo[" + index + "].alt").errorMessage
  }) | indent(2) }}
{% endcall %}
{% endmacro %}

{% call addAnother({
  fieldset: { legend: __("posts.form.photo.label") },
  name: __("posts.form.photo.name")
}) %}
<ol class="add-another__list" role="list">
  {% for key, value in fieldData("photo").value %}
  <li class="add-another__list-item">
    {{ photoFieldset(key or loop.index0) }}
  </li>
  {% else %}
  <li class="add-another__list-item">
    {{ photoFieldset(0) }}
  </li>
  {% endfor %}
</ol>
{% endcall %}