{% import "_includes/forms" as forms %}

{% if sections %}

    {% if craft.app.getIsMultiSite() %}
        {% set editableSites = craft.app.sites.getEditableSites() %}

        {% if editableSites|length > 1 %}
            {% set siteInput %}
                <div class="select">
                    <select id="site-id" name="siteId">
                        {% for site in editableSites %}
                            <option value="{{ site.id }}"{% if site.id == widget.siteId %} selected{% endif %}>{{ site.name|t('site') }}</option>
                        {% endfor %}
                    </select>
                </div>
            {% endset %}

            {{ forms.field({
                id: 'site-id',
                label: "Site"|t('app'),
            }, siteInput) }}
        {% endif %}
    {% endif %}

    {% set sectionOptions = [] %}
    {% for section in sections %}
        {% set sectionOptions = sectionOptions|merge([{ label: section.name|t('site'), value: section.id }]) %}
    {% endfor %}
    {{ forms.selectField({
        label: "Section"|t('app'),
        instructions: 'Which section do you want to save entries to?'|t('app'),
        id: 'section',
        name: 'section',
        options: sectionOptions,
        value: widget.section,
        toggle: true,
        targetPrefix: 'section'
    }) }}

    {% set selectedSectionId = widget.section %}

    {% for section in sections %}
        {% set showSection = ((not selectedSectionId and loop.first) or selectedSectionId == section.id) %}
        <div id="section{{ section.id }}"{% if not showSection %} class="hidden"{% endif %}>

            {% set entryTypeOptions = [] %}
            {% for entryType in section.getEntryTypes() %}
                {% set entryTypeOptions = entryTypeOptions|merge([{ label: entryType.name|t('site'), value: entryType.id }]) %}
            {% endfor %}

            {% if entryTypeOptions|length == 1 %}
                {{ hiddenInput("sections[#{section.id}][entryType]", widget.entryType) }}
            {% else %}
                {{ forms.selectField({
                    label: "Entry Type"|t('app'),
                    instructions: "Which type of entries do you want to create?"|t('app'),
                    id: 'entryType',
                    name: 'sections['~section.id~'][entryType]',
                    options: entryTypeOptions,
                    value: widget.entryType,
                    toggle: true,
                    targetPrefix: 'section'~section.id~'-type'
                }) }}
            {% endif %}

            {% set entryTypes = section.getEntryTypes() %}
            {% for entryType in entryTypes %}
                {% set showEntryType = (((not showSection or not widget.entryType) and loop.first) or widget.entryType == entryType.id or entryTypes|length == 1) %}
                {% set fieldOptions = (fieldsByEntryTypeId[entryType.id] ?? [])|map(layoutElement => {
                    label: raw(layoutElement.getField().name|e ~ (layoutElement.required ? '<span class="required"></span>')),
                    name: 'sections['~section.id~'][fields][]',
                    value: layoutElement.getField().id,
                    checked: (layoutElement.required or layoutElement.getField().id in widget.fields),
                    disabled: layoutElement.required
                }) %}

                <div id="section{{ section.id }}-type{{ entryType.id }}"{% if not showEntryType %} class="hidden"{% endif %}>
                    {{ forms.checkboxGroupField({
                        label: "Fields"|t('app'),
                        instructions: "Which fields should be visible in the widget?"|t('app'),
                        options: fieldOptions,
                    }) }}
                </div>
            {% endfor %}
        </div>
    {% endfor %}

{% else %}

    <p>{{ "No sections are available."|t('app') }}</p>

{% endif %}