<section id="{{ applet_data.id }}-eula">
    {{ render_h2(l10n("disclaimer.warning", "commons", user_lang)) }}
    {{ render_paragraph(l10n("eula.1", applet_data.id, user_lang)) }}
    {{ render_paragraph(l10n("eula.2", applet_data.id, user_lang)) }}
    {{ render_paragraph(l10n("eula.3", applet_data.id, user_lang)) }}
</section>

<section id="{{ applet_data.id }}-input">
    {{ render_h2(l10n("file.selection.title", applet_data.id, user_lang)) }}

    {{ render_paragraph(l10n("file.selection.1", applet_data.id, user_lang)) }}

    {{ render_file_input(applet_data.id + "-input-file", true, ".xlsx, .xlsm", true, true, user_lang) }}
</section>

<section id="{{ applet_data.id }}-details">
    {{ render_h2(l10n("details.title", applet_data.id, user_lang)) }}

    <div id="{{ applet_data.id }}-details-empty">
        {{ render_paragraph(l10n("details.empty.1", applet_data.id, user_lang)) }}
    </div>

    <div id="{{ applet_data.id }}-details-populated" hidden>
        {{ render_button(
            "<i class=\"fa-duotone fa-solid fa-floppy-disks mr-xs\"></i>" +
                l10n("download.action.all", "commons", user_lang),
            false, applet_data.id + "-files-download-all", "bkgd-green") }}
        {{ render_button(
            "<i class=\"fa-duotone fa-solid fa-trash mr-xs\"></i>" +
                l10n("clear.all.files", "commons", user_lang),
            false, applet_data.id + "-files-clear", "bkgd-orange") }}
    </div>

    <div id="{{ applet_data.id }}-result-container"></div>
</section>

<template id="tmpl-success-root">
    <div class="bkgd-grid10 w-full r-l border cursor-pointer epr-download-all-click">
        <table class="table-p-xxs table-v-center">
            <tr>
                <td rowspan="2" class="br bkgd-green bkgd-grid30 rl-l">
                    <i class="fa-duotone fa-solid fa-circle-check mx-s"></i>
                </td>
                <td class="w-full t-bold">
                    <span id="tmpl-success-filename">PlaceholderSuccessName.xlsx</span>
                </td>
                <td rowspan="2" class="bl bkgd-blue bkgd-grid30 rr-l">
                    <i class="fa-duotone fa-download  mx-s"></i>
                </td>
            </tr>
            <tr class="t-italic">
                <td>{{ l10n("result.success.count", applet_data.id, user_lang) }}</td>
            </tr>
        </table>
    </div>
</template>

<template id="tmpl-warning-root">
    <div class="bkgd-grid10 w-full r-l border">
        <table class="table-p-xxs table-v-center">
            <tr>
                <td rowspan="2" class="br bkgd-orange bkgd-grid30 rl-l">
                    <i class="fa-duotone fa-solid fa-triangle-exclamation mx-s"></i>
                </td>
                <td class="w-full t-bold">
                    <span id="tmpl-warning-filename">PlaceholderWarningName.xlsx</span>
                </td>
            </tr>
            <tr class="t-italic">
                <td>
                    <span id="tmpl-warning-message-extension">
                        {{ l10n("result.warning.extension", applet_data.id, user_lang) }}
                    </span>
                    <span id="tmpl-warning-message-no-password">
                        {{ l10n("result.warning.password", applet_data.id, user_lang) }}
                    </span>
                </td>
            </tr>
        </table>
    </div>
</template>

<template id="tmpl-error-root">
    <div class="bkgd-grid10 w-full r-l border">
        <table class="table-p-xxs table-v-center">
            <tr>
                <td rowspan="2" class="br bkgd-red bkgd-grid30 rl-l">
                    <i class="fa-duotone fa-solid fa-hexagon-exclamation mx-s"></i>
                </td>
                <td class="w-full t-bold">
                    <span id="tmpl-error-filename">PlaceholderErrorName.xlsx</span>
                </td>
            </tr>
            <tr class="t-italic">
                <td>
                    <span id="tmpl-error-message-jszip">
                        {{ l10n("result.error.jszip", applet_data.id, user_lang) }}
                    </span>
                </td>
            </tr>
        </table>
    </div>
</template>

{% if is_standalone %}
    <section id="{{ applet_data.id }}-licenses">
        {{ render_h2(l10n("licenses.title", applet_data.id, user_lang)) }}
        <p>123</p>
    </section>
{% endif %}
