{% extends "base.html" %}

{% block content %}
  <c-section header_title="Buttons">
    <div class="mb-4 space-x-2">
      <button class="button button-primary">Primary</button>
      <button class="button button-secondary">Secondary</button>
      <button class="button button-outline-error">Outline error</button>
    </div>
    <div class="mb-4 space-x-2">
      <button class="button-sm button button-primary">Primary sm</button>
      <button class="button-sm button button-primary md:button-base">Primary base</button>
      <button class="button-lg button button-primary">Primary lg</button>
    </div>
    <div class="mb-4 space-x-2">
      <button class="button-sm button button-secondary">
        {% icon "gear" classname="button-icon" %}Gérer
      </button>
      <button class="button button-secondary">
        {% icon "gear" classname="button-icon" %}Gérer
      </button>
      <button class="button-lg button button-secondary">
        {% icon "gear" classname="button-icon" %}Gérer
      </button>
    </div>
  </c-section>

  <c-section header_title="Pagination">
    <c-pagination aria-label="Pagination">
      <c-pagination.link href="#" title="Page précédente">
        {% icon "angle-left" classname="size-3" %}
      </c-pagination.link>
      <c-pagination.link href="#">1</c-pagination.link>
      <c-pagination.link href="#" is_current>2</c-pagination.link>
      <c-pagination.link href="#">3</c-pagination.link>
      <c-pagination.text>…</c-pagination.text>
      <c-pagination.link href="#">7</c-pagination.link>
      <c-pagination.link href="#">8</c-pagination.link>
      <c-pagination.link href="#">9</c-pagination.link>
      <c-pagination.link href="#" title="Page suivante">
        {% icon "angle-right" classname="size-3" %}
      </c-pagination.link>
    </c-pagination>
  </c-section>

  <c-section header_title="Badges">
    <div class="mb-4 space-x-2">
      <span class="badge badge-primary">Primary</span>
      <span class="badge badge-info">Info</span>
    </div>
    <div class="mb-4 inline-flex items-center">
      <span class="text-xl font-medium">Filtres</span>
      <span class="ml-2 rounded-full badge badge-primary badge-sm">3</span>
    </div>
  </c-section>

  <c-section header_title="Alerts">
    <c-alert>
      Un message sans niveau particulier avec un <a href="#">lien</a>.
    </c-alert>
    <c-alert level="info">
      Un message d'information avec un <a href="#">lien</a>.
    </c-alert>
    <c-alert level="success">
      Un message de réussite avec un <a href="#">lien</a>.
    </c-alert>
    <c-alert level="warning">
      Un message d'avertissement avec un <a href="#">lien</a>.
    </c-alert>
    <c-alert level="error">
      Un message d'erreur avec un <a href="#">lien</a>.
    </c-alert>
  </c-section>

  <c-section header_title="Forms">
    <div class="max-w-screen-lg">
      <c-form :form="form" action="{% url "styleguide" %}" />
    </div>
  </c-section>
{% endblock %}