{% extends "layouts/workspace_settings.html" %}
{% comment %}
Tags, as rows rather than as a table of forms.

The create form is a modal rather than an always-open box above the list: the
thing you do once should not be as loud as the list you came to read. The
header button and the empty state's both open it with $modal — see
partials/_modal_behaviours.html for why by id rather than through a flag here.
{% endcomment %}
{% load common_extras %}
{% block title %}Tags · DemandTrail Messaging{% endblock %}
{% block content_wrap %}{% endblock %}

{% block content %}
<div class="max-w-[1060px] w-full">
    <div class="page-header">
        <div class="page-header-text">
            <h1 class="page-title">Tags</h1>
            <p class="page-lede">
                A tag labels a person. Flows add and remove them, segments filter on them, and
                deleting one takes it off every contact carrying it.
            </p>
        </div>
        <button type="button" class="btn-pill-primary flex-shrink-0" @click="$modal('new-tag')">{% include "partials/_nav_icon.html" with name="tag" icon_size=16 %} New tag</button>
    </div>

    {% comment %}
      No csrf_token: templates/base.html attaches the token to every same-origin
      htmx request from one hidden input, and refuses to attach it to a
      cross-origin one.
    {% endcomment %}
    {% modal "new-tag" title="New tag" close_on="tagsChanged" %}
    <form hx-post="{% url 'contacts:tag_create' workspace_id=request.workspace.id %}">
        <div class="bb-modal-body">
            <div class="field">
                <label class="field-label" for="new-tag-name">What is the tag called?</label>
                <input class="form-input-styled" id="new-tag-name" type="text" name="name" maxlength="100" required autofocus placeholder="VIP">
            </div>
        </div>
        <div class="bb-modal-actions">
            <button type="button" class="btn-pill-secondary" @click="close()">Cancel</button>
            <button type="submit" class="btn-pill-primary">Create tag</button>
        </div>
    </form>
    {% endmodal %}

    {% include "contacts/_tag_rows.html" %}
</div>
{% endblock %}

{% block alpine_components %}{{ block.super }}{% include "partials/_list_behaviours.html" %}{% endblock %}