{% extends 'core/base.html' %}

{% block content %}
<div class="page-head page-head-width-1100">
    <div>
        <h1>{{ title }}</h1>
        <p>{{ org.name }}</p>
    </div>
    <div class="page-head-actions">
        <a class="button secondary" href="{{ back_url }}">Back</a>
    </div>
</div>

<div class="form-card" style="max-width:1100px;">
    <form method="post" id="contact-form">
        {% csrf_token %}

        {% if form.non_field_errors %}
            <div style="margin-bottom:18px;color:var(--danger);">
                {{ form.non_field_errors }}
            </div>
        {% endif %}

        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;">
            <div>
                <label for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
                {{ form.first_name }}
                {{ form.first_name.errors }}
            </div>

            <div>
                <label for="{{ form.last_name.id_for_label }}">{{ form.last_name.label }}</label>
                {{ form.last_name }}
                {{ form.last_name.errors }}
            </div>

            <div>
                <label for="{{ form.contact_type.id_for_label }}">{{ form.contact_type.label }}</label>
                {{ form.contact_type }}
                {{ form.contact_type.errors }}
            </div>

            <div>
                <label for="{{ form.title.id_for_label }}">{{ form.title.label }}</label>
                {{ form.title }}
                {{ form.title.errors }}
            </div>

            <div>
                <label for="{{ form.location.id_for_label }}">{{ form.location.label }}</label>
                {{ form.location }}
                {{ form.location.errors }}
            </div>

            <div class="contact-important-toggle-cell">
                {% include 'core/_boolean_toggle.html' with field=form.important_contact %}
                {{ form.important_contact.errors }}
            </div>
        </div>

        <div style="margin-top:26px;padding-top:22px;border-top:1px solid var(--line);">
            <div class="section-head" style="margin-bottom:14px;">
                <div>
                    <h2 style="margin:0;font-size:18px;">Email Addresses</h2>
                    <p class="section-subtitle">Add one or more email addresses for this contact.</p>
                </div>
                <button type="button" class="button secondary compact" id="add-email">Add email</button>
            </div>

            {{ email_formset.management_form }}

            {% if email_formset.non_form_errors %}
                <div style="margin-bottom:12px;color:var(--danger);">
                    {{ email_formset.non_form_errors }}
                </div>
            {% endif %}

            <div id="email-forms" style="display:flex;flex-direction:column;gap:10px;">
                {% for email_form in email_formset %}
                    <div class="contact-inline-form" style="display:grid;grid-template-columns:160px minmax(0,1fr) 130px 90px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:10px;background:#0e1628;">
                        {% for hidden in email_form.hidden_fields %}{{ hidden }}{% endfor %}
                        <div>
                            <label for="{{ email_form.email_type.id_for_label }}">{{ email_form.email_type.label }}</label>
                            {{ email_form.email_type }}
                            {{ email_form.email_type.errors }}
                        </div>
                        <div>
                            <label for="{{ email_form.email.id_for_label }}">{{ email_form.email.label }}</label>
                            {{ email_form.email }}
                            {{ email_form.email.errors }}
                        </div>
                        <div class="contact-inline-toggle-cell">
                            {% include 'core/_boolean_toggle.html' with field=email_form.is_primary %}
                            {{ email_form.is_primary.errors }}
                        </div>
                        <div class="contact-inline-action-cell">
                            {% if email_form.instance.pk %}
                                <label style="display:flex;align-items:center;gap:8px;margin-bottom:11px;cursor:pointer;">
                                    {{ email_form.DELETE }}
                                    <span>Delete</span>
                                </label>
                            {% else %}
                                <button type="button" class="button secondary compact remove-form">Remove</button>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>

            <template id="email-empty-form">
                <div class="contact-inline-form" style="display:grid;grid-template-columns:160px minmax(0,1fr) 130px 90px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:10px;background:#0e1628;">
                    {% for hidden in email_formset.empty_form.hidden_fields %}{{ hidden }}{% endfor %}
                    <div>
                        <label for="{{ email_formset.empty_form.email_type.id_for_label }}">{{ email_formset.empty_form.email_type.label }}</label>
                        {{ email_formset.empty_form.email_type }}
                    </div>
                    <div>
                        <label for="{{ email_formset.empty_form.email.id_for_label }}">{{ email_formset.empty_form.email.label }}</label>
                        {{ email_formset.empty_form.email }}
                    </div>
                    <div class="contact-inline-toggle-cell">
                        {% include 'core/_boolean_toggle.html' with field=email_formset.empty_form.is_primary %}
                    </div>
                    <div class="contact-inline-action-cell">
                        <button type="button" class="button secondary compact remove-form">Remove</button>
                    </div>
                </div>
            </template>
        </div>

        <div style="margin-top:26px;padding-top:22px;border-top:1px solid var(--line);">
            <div class="section-head" style="margin-bottom:14px;">
                <div>
                    <h2 style="margin:0;font-size:18px;">Contact Numbers</h2>
                    <p class="section-subtitle">Add phone, mobile, fax, or other contact numbers.</p>
                </div>
                <button type="button" class="button secondary compact" id="add-phone">Add number</button>
            </div>

            {{ phone_formset.management_form }}

            {% if phone_formset.non_form_errors %}
                <div style="margin-bottom:12px;color:var(--danger);">
                    {{ phone_formset.non_form_errors }}
                </div>
            {% endif %}

            <div id="phone-forms" style="display:flex;flex-direction:column;gap:10px;">
                {% for phone_form in phone_formset %}
                    <div class="contact-inline-form" style="display:grid;grid-template-columns:150px minmax(0,1fr) 120px 130px 90px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:10px;background:#0e1628;">
                        {% for hidden in phone_form.hidden_fields %}{{ hidden }}{% endfor %}
                        <div>
                            <label for="{{ phone_form.phone_type.id_for_label }}">{{ phone_form.phone_type.label }}</label>
                            {{ phone_form.phone_type }}
                            {{ phone_form.phone_type.errors }}
                        </div>
                        <div>
                            <label for="{{ phone_form.number.id_for_label }}">{{ phone_form.number.label }}</label>
                            {{ phone_form.number }}
                            {{ phone_form.number.errors }}
                        </div>
                        <div>
                            <label for="{{ phone_form.extension.id_for_label }}">{{ phone_form.extension.label }}</label>
                            {{ phone_form.extension }}
                            {{ phone_form.extension.errors }}
                        </div>
                        <div class="contact-inline-toggle-cell">
                            {% include 'core/_boolean_toggle.html' with field=phone_form.is_primary %}
                            {{ phone_form.is_primary.errors }}
                        </div>
                        <div class="contact-inline-action-cell">
                            {% if phone_form.instance.pk %}
                                <label style="display:flex;align-items:center;gap:8px;margin-bottom:11px;cursor:pointer;">
                                    {{ phone_form.DELETE }}
                                    <span>Delete</span>
                                </label>
                            {% else %}
                                <button type="button" class="button secondary compact remove-form">Remove</button>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>

            <template id="phone-empty-form">
                <div class="contact-inline-form" style="display:grid;grid-template-columns:150px minmax(0,1fr) 120px 130px 90px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:10px;background:#0e1628;">
                    {% for hidden in phone_formset.empty_form.hidden_fields %}{{ hidden }}{% endfor %}
                    <div>
                        <label for="{{ phone_formset.empty_form.phone_type.id_for_label }}">{{ phone_formset.empty_form.phone_type.label }}</label>
                        {{ phone_formset.empty_form.phone_type }}
                    </div>
                    <div>
                        <label for="{{ phone_formset.empty_form.number.id_for_label }}">{{ phone_formset.empty_form.number.label }}</label>
                        {{ phone_formset.empty_form.number }}
                    </div>
                    <div>
                        <label for="{{ phone_formset.empty_form.extension.id_for_label }}">{{ phone_formset.empty_form.extension.label }}</label>
                        {{ phone_formset.empty_form.extension }}
                    </div>
                    <div class="contact-inline-toggle-cell">
                        {% include 'core/_boolean_toggle.html' with field=phone_formset.empty_form.is_primary %}
                    </div>
                    <div class="contact-inline-action-cell">
                        <button type="button" class="button secondary compact remove-form">Remove</button>
                    </div>
                </div>
            </template>
        </div>

        <div style="margin-top:26px;padding-top:22px;border-top:1px solid var(--line);">
            <label for="{{ form.notes.id_for_label }}">{{ form.notes.label }}</label>
            {{ form.notes }}
            {{ form.notes.errors }}
        </div>

        <div class="form-actions">
            <button type="submit">Save Contact</button>
            <a class="button secondary" href="{{ back_url }}">Cancel</a>
        </div>
    </form>
</div>


{% endblock %}
{% block scripts %}<script src="/static/js/contact-form.js"></script>{% endblock %}