{% extends '@MauticCore/Default/content.html.twig' %}

{% block headerTitle pageTitle %}

{% block content %}
    {% set isModal = isModal|default(false) %}

    <style>
        .dealflow-stage-entry {
            background: var(--layer-02);
            border: 1px solid var(--border-subtle-01);
            border-radius: var(--border-radius-lg);
            overflow: visible;
        }

        .dealflow-stage-entry--modal {
            border: 0;
            border-radius: var(--border-radius-md);
        }

        {% if isModal %}
        #MauticSharedModal .modal-header {
            display: none;
        }

        #MauticSharedModal .modal-body {
            padding: 0;
        }
        {% endif %}

        .dealflow-stage-entry__body {
            padding: 24px 26px;
        }

        .dealflow-stage-entry__body--modal {
            padding-top: 20px;
        }

        .dealflow-stage-entry__card {
            background: var(--background);
            border: 1px solid var(--border-subtle-01);
            border-radius: var(--border-radius-md);
            overflow: visible;
        }

        .dealflow-stage-entry__card-head {
            background: var(--layer-01);
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
            border-bottom: 1px solid var(--border-subtle-01);
            padding: 16px 18px 14px;
        }

        .dealflow-stage-entry__card-title {
            color: var(--text-primary);
            font-size: 17px;
            font-weight: 700;
            margin: 0 0 4px;
        }

        .dealflow-stage-entry__card-copy {
            color: var(--text-secondary);
            font-size: 13px;
            margin: 0;
        }

        .dealflow-stage-entry__card-body {
            border-bottom-left-radius: inherit;
            border-bottom-right-radius: inherit;
            padding: 18px;
        }

        .dealflow-stage-entry__context {
            background: var(--layer-accent-01);
            border: 1px solid var(--border-subtle-01);
            border-radius: var(--border-radius-sm);
            color: var(--text-secondary);
            font-size: 13px;
            margin-bottom: 16px;
            padding: 12px 14px;
        }

        .dealflow-stage-entry__actions {
            border-top: 1px solid var(--border-subtle-01);
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 18px 26px 22px;
        }

        .dealflow-stage-entry .form-control,
        .dealflow-stage-entry .chosen-container-single .chosen-single,
        .dealflow-stage-entry .chosen-container-multi .chosen-choices {
            background: var(--background);
            border: 1px solid var(--border-subtle-01);
            border-radius: var(--border-radius-sm);
            box-shadow: none;
            color: var(--text-primary);
            min-height: 42px;
        }

        .dealflow-stage-entry .chosen-container {
            width: 100% !important;
        }

        .dealflow-stage-entry .chosen-container-active {
            z-index: 40;
        }

        .dealflow-stage-entry .chosen-drop {
            z-index: 45;
        }

        .dealflow-stage-entry .form-control:focus,
        .dealflow-stage-entry .chosen-container-active .chosen-single,
        .dealflow-stage-entry .chosen-container-active .chosen-choices {
            border-color: var(--link-primary);
            box-shadow: 0 0 0 1px var(--link-primary);
        }
    </style>

    {{ form_start(form, {'action': formAction|default(null)}) }}
    <div class="dealflow-stage-entry{{ isModal ? ' dealflow-stage-entry--modal' : '' }}">
        <div class="dealflow-stage-entry__body{{ isModal ? ' dealflow-stage-entry__body--modal' : '' }}">
            {% if form.vars.errors|length > 0 %}
                <div class="alert alert-danger">
                    {{ form_errors(form) }}
                </div>
            {% endif %}

            <section class="dealflow-stage-entry__card">
                <div class="dealflow-stage-entry__card-head">
                    <h3 class="dealflow-stage-entry__card-title">Stage settings</h3>
                    <p class="dealflow-stage-entry__card-copy">Keep the stage language crisp and set the probability and ordering so reporting stays trustworthy.</p>
                </div>
                <div class="dealflow-stage-entry__card-body">
                    {% if selectedPipeline is defined and selectedPipeline %}
                        <div class="dealflow-stage-entry__context">
                            This stage belongs to <strong>{{ selectedPipeline.getName() }}</strong>.
                        </div>
                    {% endif %}
                    <div class="row">
                        <div class="col-md-6">{{ form_row(form.name) }}</div>
                        <div class="col-md-6">{{ form_row(form.slug) }}</div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">{{ form_row(form.stageType) }}</div>
                        <div class="col-md-6">{{ form_row(form.probability) }}</div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">{{ form_row(form.sortOrder) }}</div>
                        <div class="col-md-6">{{ form_row(form.isPublished) }}</div>
                    </div>
                </div>
            </section>
        </div>

        <div class="dealflow-stage-entry__actions">
            <button class="btn btn-primary" type="submit">Save Stage</button>
            {% if isModal %}
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            {% else %}
                <a class="btn btn-secondary" href="{{ cancelUrl }}" data-toggle="ajax">Cancel</a>
            {% endif %}
            {% if stage is defined and stage.getId() and not isModal %}
                <a class="btn btn-danger" href="{{ path('mautic_dealflow_stage_delete', {'objectId': stage.getId()}) }}">Delete Stage</a>
            {% endif %}
        </div>
    </div>
    {{ form_end(form) }}
{% endblock %}
