{% extends "django_prometric/base.html" %}
{% load i18n prometric_extras %}

{% block title %}{{ route.display }}{% endblock %}
{% block page_title %}<span class="pm-route">{{ route.display|route_html }}</span>{% endblock %}

{% block page_meta %}
  <span class="pm-page-head__meta">
    <span class="pm-badge pm-badge--{{ route.group }}">{{ route.group }}</span>
    {% if route.methods %}<span class="pm-methods">{{ route.methods|join:" " }}</span>{% endif %}
    <span class="pm-methods">{{ route.view }}</span>
  </span>
{% endblock %}

{% block page_actions %}
  <form method="get" data-autosubmit>
    {% if request.GET.admin %}<input type="hidden" name="admin" value="{{ request.GET.admin }}">{% endif %}
    {% include "django_prometric/_period.html" %}
  </form>
{% endblock %}

{% block content %}
  {% for section in sections %}
    <details class="pm-section" open>
      <summary class="pm-section__head">
        <svg class="pm-section__chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M4 2.5 7.5 6 4 9.5"/>
        </svg>
        <span class="pm-section__name">{{ section.provider.verbose_name }}</span>
        <span class="pm-section__kind">{{ section.provider.kind }}</span>
      </summary>
      <div class="pm-section__body" data-section-url="{{ section.url }}" aria-busy="true">
        <div class="pm-skel-body" aria-hidden="true">
          <span class="pm-skel" style="inline-size: 55%"></span>
          <span class="pm-skel" style="inline-size: 90%"></span>
          <span class="pm-skel" style="inline-size: 72%"></span>
        </div>
      </div>
    </details>
  {% empty %}
    <div class="pm-empty pm-card">
      <p>{% translate "No data source is configured for route details." %}</p>
      <a href="{% url 'django_prometric:providers' %}">{% translate "Set up a provider" %}</a>
    </div>
  {% endfor %}
{% endblock %}