{% extends "freeform/_layouts/main" %}

{% set selectedSubnavItem = 'settings' %}
{% set fullPageForm = true %}

{% set navItems = craft.freeform.settingsNavigation %}

{% set segment2 = craft.app.request.getSegment(2) %}
{% set segment3 = craft.app.request.getSegment(3) %}
{% set segment4 = craft.app.request.getSegment(4) %}

{% block actionButton %}

    {% if not readOnly %}

        <div class="buttons">
            <div class="btngroup submit">
                <input type="submit" class="btn submit" value="{{ 'Save'|t('freeform') }}">
            </div>
        </div>

    {% endif %}

{% endblock %}

{% block sidebar %}
    {% set segment = segment3~(segment4 ? '/'~segment4) %}
    {% set segment = segment|freeformRegexReplace('/\\/\\d+$/') %}

    <nav>
        <ul>
            {% for id, item in navItems %}
                {% if item.heading is defined %}
                    <li class="heading"><span>{{ item.heading }}</span></li>
                {% else %}
                    <li>
                        {% set selected = id == segment %}
                        <a href="{{ url('freeform/settings/'~id) }}"{% if selected %} class="sel"{% endif %}>
                            {{ item.title | raw }}
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </nav>
{% endblock %}

{% block content %}

    {% set isCraft4 = craft.app.getInfo().version starts with('4.') %}

    {% if isCraft4 %}
        {% css %}
            .c4-readonly-notice #content-notice .content-notice{ display: inline-flex; justify-content: flex-start;} .c4-readonly-notice .content-notice{ align-items: center; color: var(--gray-600); display: flex; gap: var(--s); place-content: stretch center;} .c4-readonly-notice .content-notice p{ flex: 1; margin: 0;} .c4-readonly-notice .content-notice .content-notice-icon{ align-items: center; border: 2px solid rgba(51, 64, 77, .2); border-radius: 100%; box-shadow: 0 1px 1px 1px var(--white); box-sizing: border-box; display: flex; flex-shrink: 0; height: 34px; justify-content: center; position: relative; width: 34px;} .c4-readonly-notice .content-notice .content-notice-icon .cp-icon{ --icon-size: 1.25rem;} .c4-readonly-notice .cp-icon, .cp-icon svg{ height: var(--icon-size); width: var(--icon-size);} .c4-readonly-notice .cp-icon{ align-items: center; display: flex; justify-content: center; max-width: var(--icon-size);} .c4-readonly-notice .cp-icon svg circle, .c4-readonly-notice .cp-icon svg ellipse, .c4-readonly-notice .cp-icon svg line, .c4-readonly-notice .cp-icon svg path, .c4-readonly-notice .cp-icon svg polygon, .c4-readonly-notice .cp-icon svg polyline, .c4-readonly-notice .cp-icon svg rect, .c4-readonly-notice .cp-icon svg text{ fill: var(--icon-color, var(--ui-control-color)); stroke-width: 0;}
        {% endcss %}
    {% endif %}

    {% if readOnly %}

        <header id="content-header" class="pane-header{% if isCraft4 %} c4-readonly-notice{% endif %}">
            <div id="content-notice" role="status"><div class="content-notice"><div class="content-notice-icon" aria-hidden="true"><div class="cp-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" focusable="false" aria-hidden="true"><path d="M630.8 469.1l-95.4-74.8c1.4-2.1 2.7-4.3 4-6.5l4.7-8.1c6.1-11 11.4-22.4 15.8-34.3c3.2-8.7 .5-18.4-6.4-24.6l-43.3-39.4c1.1-8.3 1.7-16.8 1.7-25.4s-.6-17.1-1.7-25.4l43.3-39.4c6.9-6.2 9.6-15.9 6.4-24.6h.1c-4.4-12-9.7-23.4-15.8-34.4l-4.7-8.1c-6.6-11-14-21.4-22.1-31.2c-5.9-7.1-15.7-9.6-24.5-6.8l-55.7 17.7c-13.4-10.3-28.2-18.9-44-25.4l-12.5-57.1c-2-9.1-9-16.3-18.2-17.8C348.8 1.2 334.5 0 320 0s-28.7 1.2-42.5 3.6c-9.2 1.5-16.2 8.7-18.2 17.8l-12.5 57.1c-15.8 6.5-30.6 15.1-44 25.4l-55.7-17.7c-2-.6-4.1-1-6.2-1.1L38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7zM320 176c44.2 0 80 35.8 80 80s-1.8 19.4-5.1 28.2l-120.1-94.1c12.9-8.8 28.4-14 45.2-14zM247.4 289.6L82.5 160.3c-.8 2.1-1.7 4.2-2.4 6.3c-3.2 8.7-.5 18.4 6.4 24.6l43.3 39.4c-1.1 8.3-1.7 16.8-1.7 25.4s.6 17.1 1.7 25.5l-43.3 39.4c-6.9 6.2-9.6 15.9-6.4 24.6c4.4 11.9 9.7 23.3 15.8 34.3l4.7 8.1c6.6 11 14 21.4 22.1 31.2c5.9 7.1 15.7 9.6 24.5 6.8l55.6-17.8c13.4 10.3 28.2 18.9 44 25.4l12.5 57.1c2 9.1 9 16.3 18.2 17.8c13.8 2.3 28 3.5 42.5 3.5s28.7-1.2 42.5-3.5c9.2-1.5 16.2-8.7 18.2-17.8l12.5-57.1c8-3.3 15.8-7.2 23.3-11.5l-111.6-87.5c-25.5-4.9-46.7-22-57.4-45z"></path></svg></div></div><p>Changes to these settings aren’t permitted in this environment.</p></div></div>
        </header>

    {% endif %}

{% endblock %}