{% extends 'ddm_core/base.html' %}

{% block page_title %}Donation Instructions{% endblock page_title %}

{% block main_heading %}Instructions{% endblock main_heading %}

{% block sub_heading %}
  <p>
    Number of pages: {{ instructions | length }}
  </p>
  <p>
    <a class="ddm-btn-base ddm-btn-green" href="{% url 'ddm_datadonation:instructions:create' project_url_id file_uploader.pk %}">Create New Instruction</a>
  </p>
{% endblock sub_heading %}

{% block main_body %}
  {% for page in instructions %}
    <div class="ddm-section-container ddm-section-collapsible mb-0">
      {% url 'ddm_datadonation:instructions:edit' project_url_id file_uploader.pk page.pk as edit_url %}
      {% url 'ddm_datadonation:instructions:delete' project_url_id file_uploader.pk page.pk as delete_url %}

      {% with page_number=page.index|stringformat:"s" %}
        {% with content=page.text|safe accordion_id="Page"|add:page_number title="Page "|add:page_number %}
          {% include "ddm_core/components/accordion_card.html" with extra_classes="narrow-accordion mb-0" accordion_id=accordion_id accordion_title=title is_expanded=True %}
        {% endwith %}
      {% endwith %}
    </div>

    <div class="ps-3 pt-1 mb-5">
      <a class="ddm-ui-link" href="{{ edit_url }}">Edit</a>
      <span class="ddm-separator"></span>
      <a class="ddm-ui-link fc-red" href="{{ delete_url }}">Delete</a>
    </div>
  {% endfor %}
  <div class="mt-3">
    <a href="{% url 'ddm_datadonation:overview' project_url_id %}"><i class="bi bi-arrow-left-short"></i> Back</a>
  </div>
{% endblock main_body %}