{% macro screen(widget, showBackupOption, bundleUrl, screen, placeholder, resultsIcon, resultsHeading, formAction, submitText) %}
    {% import "_includes/forms" as forms %}
    {% set idPrefix = 'cs-'~screen~random() %}

    <div id="cs-screen-{{ screen }}" class="cs-screen cs-screen-2 cs-screen-{{ screen }}" action="{{ formAction }}" method="get" target="_blank" rel="noopener">
        {{ forms.textareaField({
            first: true,
            class: 'cs-body-text',
            placeholder: placeholder|t('app'),
            rows: 5
        }) }}
        <div class="cs-search-results-container hidden">
            <div class="cs-search-icon">{{ svg(resultsIcon, sanitize=false) }}</div>
            <h2>{{ resultsHeading }}</h2>
            <ul class="cs-search-results"></ul>
        </div>
        <div class="cs-forms">
            <form class="cs-search-form" action="{{ formAction }}" method="get" target="_blank" rel="noopener">
                <div class="cs-search-params"></div>
                <button type="submit" class="btn submit fullwidth disabled">{{ submitText }}</button>
                {% if CraftEdition == CraftPro %}
                    <p>{{ "or <a>send to Developer Support</a>"|t('app')|raw }}</p>
                {% endif %}
                <hr>
                <h2>{{ 'More Resources'|t('app') }}</h2>
                <div class="cs-logo-resources">
                    <a href="https://craftcms.com/partners" target="_blank" rel="noopener">
                        <h3><img src="{{ bundleUrl }}/logos/craft-partners.svg" alt="Craft Support"></h3>
                        <p>{{ 'Find an official Craft Partner'|t('app') }}</p>
                    </a>
                    <a href="https://craftcms.com/discord" target="_blank" rel="noopener">
                        <h3><img src="{{ bundleUrl }}/logos/discord.svg" alt="Discord"></h3>
                        <p>{{ 'Meet the Craft community'|t('app') }}</p>
                    </a>
                    <a href="https://craftquest.io" target="_blank" rel="noopener">
                        <h3><img src="{{ bundleUrl }}/logos/craftquest.svg" alt="CraftQuest"></h3>
                        <p>{{ 'Unlimited video training'|t('app') }}</p>
                    </a>
                </div>
                <div class="cs-icon-resources">
                    <a href="https://craftcms.com/docs/3.x/" target="_blank" rel="noopener">
                        {{ svg('@appicons/book.svg') }}
                        <span>{{ 'Documentation'|t('app') }}</span>
                    </a>
                    <a href="https://craftcms.com/knowledge-base" target="_blank" rel="noopener">
                        {{ svg('@appicons/magnifying-glass.svg') }}
                        <span>{{ 'Knowledge Base'|t('app') }}</span>
                    </a>
                </div>
            </form>
            <form class="cs-support-form hidden" action="{{ actionUrl('dashboard/send-support-request') }}" method="post" target="{{ idPrefix }}-iframe" accept-charset="UTF-8" enctype="multipart/form-data">
                {{ csrfInput() }}
                {{ hiddenInput('widgetId', widget.id) }}
                {{ hiddenInput('message', '', {class: 'cs-support-message'}) }}

                {% set email = currentUser.email %}
                {% if email in ['support@pixelandtonic.com', 'support@craftcms.com'] %}
                    {% set email = '' %}
                {% endif %}

                {{ forms.textField({
                    first: true,
                    label: "Your Email"|t('app'),
                    name: 'fromEmail',
                    value: email
                }) }}

                <a class="fieldtoggle" data-target="{{ idPrefix }}-support-more">{{ "More"|t('app') }}</a>

                <div id="{{ idPrefix }}-support-more" class="cs-support-more hidden">
                    <fieldset>
                        {{ forms.checkboxField({
                            label: 'Attach error logs'|t('app'),
                            name: 'attachLogs',
                            checked: true
                        }) }}

                        {% if showBackupOption %}
                            {{ forms.checkboxField({
                                label: 'Attach a database backup'|t('app'),
                                name: 'attachDbBackup',
                                checked: true
                            }) }}
                        {% endif %}

                        {{ forms.checkboxField({
                            name: 'attachTemplates',
                            checked: true,
                            label: 'Include your template files'|t('app'),
                        }) }}
                    </fieldset>

                    {{ forms.fileField({
                        label: 'Attach an additional file'|t('app'),
                        class: 'cs-support-attachment',
                        name: 'attachAdditionalFile',
                    }) }}
                </div>

                <button type="submit" class="btn submit fullwidth disabled">{{ 'Send'|t('app') }}</button>
                <div class="spinner hidden"></div>
            </form>
        </div>
        <iframe id="{{ idPrefix }}-iframe" name="{{ idPrefix }}-iframe" class="hidden"></iframe>
    </div>
{% endmacro %}

{% from _self import screen %}


<div class="cs-screen cs-screen-home">
    <button type="button" class="cs-opt" data-screen="help" aria-controls="cs-screen-help" aria-expanded="false">
        <div class="cs-opt-icon">{{ svg(buoeyIcon, sanitize=false) }}</div>
        <h2>{{ "Get help"|t('app') }}</h2>
        <p>{{ "How-to’s and other questions"|t('app') }}</p>
    </button>
    <button type="button" class="cs-opt" data-screen="feedback" aria-controls="cs-screen-feedback" aria-expanded="false">
        <div class="cs-opt-icon">{{ svg(bullhornIcon, sanitize=false) }}</div>
        <h2>{{ "Give feedback"|t('app') }}</h2>
        <p>{{ "Bug reports and feature requests"|t('app') }}</p>
    </button>
</div>

{{ screen(widget, showBackupOption, bundleUrl, 'help', "Briefly describe your question."|t('app'), seIcon, "Similar questions on Stack Exchange"|t('app'), 'https://craftcms.stackexchange.com/questions/ask', "Ask on Stack Exchange"|t('app')) }}

{{ screen(widget, showBackupOption, bundleUrl, 'feedback', "Briefly describe your issue or idea."|t('app'), ghIcon, "Similar issues on GitHub"|t('app'), 'https://github.com/craftcms/cms/issues/new', "Post on GitHub"|t('app')) }}
