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

{% block content %}
<form method="post">
    {% csrf_token %}

    <div class="organization-create-page-head{% if not can_add_primary_location %} organization-create-page-head-single{% endif %}">
        <div class="organization-create-header-left">
            <div class="organization-create-title">
                <h1>{{ title }}</h1>
            </div>

            <button type="submit">Create Organization</button>
        </div>

        {% if can_add_primary_location %}
        <div class="organization-create-header-right">
            <a class="button secondary" href="{{ back_url }}">Cancel</a>
            <div
                id="organization-create-favorite-slot"
                class="organization-create-favorite-slot"
            ></div>
        </div>
        {% else %}
        <div class="organization-create-header-right">
            <a class="button secondary" href="{{ back_url }}">Cancel</a>
            <div
                id="organization-create-favorite-slot"
                class="organization-create-favorite-slot"
            ></div>
        </div>
        {% endif %}
    </div>

    <p class="organization-create-subtitle">{{ subtitle }}</p>

    <div class="organization-create-grid{% if not can_add_primary_location %} organization-create-grid-single{% endif %}">
        <div class="form-card organization-create-card">
            <div class="organization-create-card-head">
                <h2>New Organization</h2>
                <p>Enter the organization details.</p>
            </div>

            {{ form.as_p }}
        </div>

        {% if can_add_primary_location %}
        <div class="form-card organization-create-card">
            <div class="organization-create-card-head">
                <h2>Primary Location</h2>
                <p>
                    Optional. Add the organization's primary location now and
                    it will be available immediately under Locations.
                </p>
            </div>

            {{ location_form.as_p }}
        </div>
        {% endif %}
    </div>
</form>
{% endblock %}