{% extends "htmx/base.html" %}
{% block main %}
  <div class="p-4 space-y-4">
    <h1 class="text-center text-3xl font-semibold mt-3">Style guide</h1>
    <section class="space-y-4 border rounded-md p-4">
      <h2 class="text-2xl">Headings</h2>
      <p>
        All pages except the incident list (at <a href="{% url "htmx:incident-list" %}">/incidents/</a>) should start with a <code>&lt;h1&gt;</code> heading.
      </p>
      <dl class="grid gap-2 grid-cols-2">
        <dt class="text-3xl">h1</dt>
        <dd>
          <code>&lt;h1 class="text-center text-3xl font-semibold mt-3"&gt;</code>
        </dd>
        <dt class="text-2xl">h2</dt>
        <dd>
          <code>&lt;h2 class="text-2xl"&gt;</code>
        </dd>
        <dt class="text-xl">h3</dt>
        <dd>
          <code>&lt;h3 class="text-xl"&gt;</code>
        </dd>
      </dl>
      <p>
        The template <code>htmx/components/_page_title.html</code> will wrap
        a <code>
        {% verbatim %}
          {{ page_title }}
        {% endverbatim %}
      </code> or
      <code>
        {% verbatim %}
          {{ title }}
        {% endverbatim %}
      </code> in context in the
      correctly styled <code>&lt;h1&gt;</code>.
    </p>
    <p>
      The card component is an exception to heading sizes.
      Its font size is always set by the <code>.card-title</code> class to match <code>.text-xl</code>.
      However, use the correct heading level inside the card title for semantic accuracy.
      E.g. using <code>&lt;h2&gt;</code> inside a card that is a subsection of the page.
    </p>
  </section>
  <section class="space-y-4 border rounded-md p-4">
    <h2 class="text-2xl">Buttons</h2>
    <div class="space-y-2">
      <h3 class="text-xl">Primary color</h3>
      <dl class="grid gap-2 grid-cols-2">
        <dt>
          <input type="button" class="btn btn-primary" value="<input> button">
        </dt>
        <dd>
          <code>
            {% verbatim %}
              &lt;input type="button" class="btn btn-primary"..
            {% endverbatim %}
          </code>
        </dd>
        <dt>
          <button class="btn btn-primary">&lt;button&gt; button</button>
        </dt>
        <dd>
          <code>
            {% verbatim %}
              &lt;input type="button" class="btn btn-primary"..
            {% endverbatim %}
          </code>
        </dd>
        <dt>
          <a class="btn btn-primary" href="#">&lt;a&gt; button</a>
        </dt>
        <dd>
          <code>
            {% verbatim %}
              &lt;input type="button" class="btn btn-primary"..
            {% endverbatim %}
          </code>
        </dd>
      </dl>
    </div>
    <div class="space-y-2">
      <h3 class="text-xl">Secondary color</h3>
      <dl class="grid gap-2 grid-cols-2">
        <dt>
          <input type="button" class="btn btn-secondary" value="<input> button">
        </dt>
        <dd>
          <code>
            {% verbatim %}
              &lt;input type="button" class="btn btn-secondary"..
            {% endverbatim %}
          </code>
        </dd>
        <dt>
          <button class="btn btn-secondary">&lt;button&gt; button</button>
        </dt>
        <dd>
          <code>
            {% verbatim %}
              &lt;button class="btn btn-secondary"..
            {% endverbatim %}
          </code>
        </dd>
        <dt>
          <a class="btn btn-secondary" href="#">&lt;a&gt; button</a>
        </dt>
        <dd>
          <code>
            {% verbatim %}
              &lt;a class="btn btn-secondary"..
            {% endverbatim %}
          </code>
        </dd>
      </dl>
    </div>
    <div class="space-y-2">
      <h3 class="text-xl">No extras</h3>
      <dl class="grid gap-2 grid-cols-2">
        <dt>
          <input type="button" class="btn" value="<input> button">
        </dt>
        <dd>
          <code>
            {% verbatim %}
              &lt;input type="button" class="btn"..
            {% endverbatim %}
          </code>
        </dd>
        <dt>
          <button class="btn">&lt;button&gt; button</button>
        </dt>
        <dd>
          <code>
            {% verbatim %}
              &lt;button class="btn"..
            {% endverbatim %}
          </code>
        </dd>
        <dt>
          <a class="btn" href="#">&lt;a&gt; button</a>
        </dt>
        <dd>
          <code>
            {% verbatim %}
              &lt;a class="btn"..
            {% endverbatim %}
          </code>
        </dd>
      </dl>
    </div>
    <p>We do not use other button types than these.</p>
  </section>
  <section class="space-y-4 border rounded-md p-4">
    <h2 class="text-2xl">Form fields</h2>
    <div class="space-y-2">
      <h3 id="form-default-rendering" class="text-xl">Default rendering</h3>
      <p>
        The form below is for testing the look and feel of autogenerated forms, made via the <code>
        {% verbatim %}
          {{ form }}
        {% endverbatim %}
      </code> Django template syntax. Submitting will re-render the form with the submitted values pre-filled. Click "Reset" to empty the fields.
    </p>
    {% if request.GET %}
      <p>The form has been submitted.</p>
      {% if form.is_valid %}
        <p>The form is VALID!</p>
        <div>Cleaned data: {{ form.cleaned_data }}</div>
        <div>Non field errors: {{ form.non_field_errors }}</div>
      {% else %}
        <p>The form is NOT VALID!</p>
        <div>Cleaned data: {{ form.cleaned_data }}</div>
        <div>Non field errors: {{ form.non_field_errors }}</div>
      {% endif %}
    {% else %}
      <p>The form has not been submitted yet.</p>
    {% endif %}
  </div>
  <p>
    This particular form is using tailwind <code>grid</code> classes to lay out the fields.
  </p>
  <form action="#form-default-rendering" method="get">
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-4 flex-wrap mb-4">{{ form }}</div>
    <div>
      <input class="btn btn-primary" type="submit">
      <a class="btn" href="{% url "htmx:styleguide" %}#form-default-rendering">Reset</a>
    </div>
  </form>
  <p>
    A single field can be auto-generated via the <code>
    {% verbatim %}
      {{ form.FIELDNAME.as_field_group }}
    {% endverbatim %}
  </code> Django template syntax. Below is the field named "Input" from the form above:
</p>
<p>{{ form.input_.as_field_group }}</p>
<p>
  You get just the actual input part of the field via the <code>
  {% verbatim %}
    {{ form.FIELDNAME }}
  {% endverbatim %}
</code> Django template syntax. Below is just the actual input-part of the field named "Input" from the form above:
</p>
<p>{{ form.input_ }}</p>
</section>
<section class="space-y-4 border rounded-md p-4">
  <h2 class="text-2xl">Colors</h2>
  <p>
    These are the available color names and colors as set by the current
    selected theme.
  </p>
  {% comment %}Also useful for making sure tailwind finds all used colors.{% endcomment %}
  <div class="flex items-center gap-1 p-1 bg-transparent">
    <div class="badge badge-base-100 bg-base-100">base-100</div>
    <div class="badge badge-base-200 bg-base-200">base-200</div>
    <div class="badge badge-base-300 bg-base-300">base-300</div>
    <div class="badge badge-primary bg-primary">primary</div>
    <div class="badge badge-secondary bg-secondary">secondary</div>
    <div class="badge badge-accent bg-accent">accent</div>
    <div class="badge badge-neutral bg-neutral">neutral</div>
    <div class="badge badge-info bg-info">info</div>
    <div class="badge badge-success bg-success">success</div>
    <div class="badge badge-warning bg-warning">warning</div>
    <div class="badge badge-error bg-error">error</div>
  </div>
</section>
</div>
{% endblock main %}