{% extends "base.html" %}
{% import "partials/icons.html" as ico %}

{% block head_title %}Clients · ImpTune{% endblock %}
{% block page_title %}<span x-data x-text="$store.i18n.t('clients')">Clients</span>{% endblock %}

{% block content %}
<p class="page-intro" x-data x-text="$store.i18n.t('clients_intro')">Clients group printers by site or organization.</p>

<div class="split">
  <div>
    {% include "partials/client_list.html" %}
  </div>

  <section class="card">
    <div class="card-head">
      {{ ico.i('plus') }}
      <h2 x-data x-text="$store.i18n.t('add_client_section')">Add client</h2>
    </div>
    <div class="card-body">
      <form hx-post="/clients" hx-target="#client-list" hx-swap="outerHTML"
            hx-on::after-request="if (event.detail.successful) this.reset()">
        <label>
          <span class="label-text" x-data x-text="$store.i18n.t('client_name_label')">Client name</span>
          <input type="text" name="name" placeholder="Contoso" required>
        </label>
        <div class="btn-row" style="margin-top:.8rem">
          <button type="submit" class="btn" x-data>
            {{ ico.i('plus', 14) }}<span x-text="$store.i18n.t('add_client')">Add client</span>
          </button>
        </div>
      </form>
    </div>
  </section>
</div>
{% endblock %}