{% extends "layouts/workspace_settings.html" %}
{% comment %}
Labels, in the shape contacts/tag_list.html established: the create form is a
modal, opened by id from the header and from the empty state.

The lede keeps the tag-versus-label distinction in full. It is the only place in
the product that draws it, and the two pages sit next to each other in the
settings column, so somebody who has just come from Tags needs the sentence that
says why this is not that.
{% endcomment %}
{% load common_extras %}
{% block title %}Labels · 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">Labels</h1>
            <p class="page-lede">Keep conversations organized. Rules can add labels automatically.</p>
        </div>
        <button type="button" class="btn-pill-primary flex-shrink-0" @click="$modal('new-label')">{% include "partials/_nav_icon.html" with name="tag" icon_size=16 %} New label</button>
    </div>

    {% modal "new-label" title="New label" close_on="inboxLabelsChanged" %}
    <form hx-post="{% url 'inbox:label_create' workspace_id=request.workspace.id %}">
        <div class="bb-modal-body">
            <div class="field">
                <label class="field-label" for="new-label-name">What is the label called?</label>
                <input class="form-input-styled" id="new-label-name" type="text" name="name" maxlength="60" required autofocus placeholder="Waiting on shipping">
            </div>
            <div class="field">
                <label class="field-label" for="new-label-color">Colour</label>
                <input class="field-swatch-well" id="new-label-color" type="color" name="color" value="{{ default_color }}">
            </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 label</button>
        </div>
    </form>
    {% endmodal %}

    {% include "inbox/_label_rows.html" %}
</div>
{% endblock %}

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