{% load static_url %}
<div class="accordion" id="records">
  <div class="card">
    <div class="card-header" id="records_card">
      <button class="btn" type="button" data-toggle="collapse" data-target="#collapse_records" aria-expanded="{% if playbook.items.records %}true{% else %}false{% endif %}" aria-controls="collapse_records">
        <h4>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-record-circle" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
            <path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
          </svg>
          Records
        </h4>
      </button>
    </div>
    <div id="collapse_records" class="collapse show" aria-labelledby="records_card" data-parent="#records" style="max-height: 275px; overflow-y: auto;">
      <div class="card-body">
        {% if playbook.items.records %}
          <ul>
            {% for record in records %}
              {% url 'ui:record' record.id as record_url %}
              <li><a href="{% static_url record_url %}">{{ record.key }}</a></li>
            {% endfor %}
          </ul>
        {% else %}
          <p>No saved records found.</p>
          <p>Learn more about saving key/values with <code>ara_record</code> in the <a href="https://ara.readthedocs.io" target="_blank">documentation</a>.
          </p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
