<div class="remodal"
     data-packages-modal
     data-remodal-id="add-package"
     data-remodal-options="hashTracking: false">
    <form>
        <div class="add-package-installing">
            <h1>{{ "PLUGIN_ADMIN.INSTALLING"|tu }}</h1>

            <div class="loading">
                <p>
                    {{ "PLUGIN_ADMIN.LOADING"|tu }}
                    <span class="fa fa-spin fa-spinner"></span>
                </p>
            </div>

            <div class="install-dependencies-package-container hidden">
                <p><strong>{{ "PLUGIN_ADMIN.DEPENDENCIES_NOT_MET_MESSAGE"|tu }}</strong></p>

                <div class="type-install hidden">
                    <p>{{ "PLUGIN_ADMIN.PACKAGES_NOT_INSTALLED"|tu }}:</p>
                    <ul></ul>
                </div>
                <div class="type-update hidden">
                    <p>{{ "PLUGIN_ADMIN.PACKAGES_NEED_UPDATE"|tu }}:</p>
                    <ul></ul>
                </div>
                <div class="type-ignore hidden">
                    <p>{{ "PLUGIN_ADMIN.PACKAGES_SUGGESTED_UPDATE"|tu }}:</p>
                    <ul></ul>
                </div>

                <div class="button-bar">
                    <button data-remodal-action="cancel" class="button secondary remodal-cancel"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|tu }}</button>
                    <a data-{{ type }}-action="install-dependencies-and-package" class="button"><i class="fa fa-fw fa-check"></i> {{ "PLUGIN_ADMIN.CONTINUE"|tu }}</a>
                </div>
            </div>

            <div class="install-package-container hidden">
                <p>
                    {{ "PLUGIN_ADMIN.READY_TO_INSTALL_PACKAGES"|tu }}
                </p>

                <ul class="packages-names-list"></ul>

                <div class="button-bar">
                    <button data-remodal-action="cancel" class="button secondary remodal-cancel"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|tu }}</button>
                    <a data-{{ type }}-action="install-package" class="button"><i class="fa fa-fw fa-check"></i> {{ "PLUGIN_ADMIN.CONTINUE"|tu }}</a>
                </div>
            </div>

            <div class="install-package-error hidden">
                <p>
                    {{ "PLUGIN_ADMIN.ERROR_INSTALLING_PACKAGES"|tu }}
                </p>

                <ul class="packages-names-list"></ul>

                <div class="button-bar">
                    <button data-remodal-action="cancel" class="button secondary remodal-cancel"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CLOSE"|tu }}</button>
                </div>
            </div>

            <div class="installing-dependencies hidden">
                <p>
                    {{ "PLUGIN_ADMIN.INSTALLING_DEPENDENCIES"|tu }}
                    <span class="fa fa-spin fa-spinner"></span>
                </p>
            </div>

            <div class="installing-package hidden">
                <p>
                    {{ "PLUGIN_ADMIN.INSTALLING_PACKAGES"|tu }}
                    <span class="fa fa-spin fa-spinner"></span>
                </p>

                <ul class="packages-names-list"></ul>
            </div>

            <div class="installation-complete hidden">
                <p>
                    {{ "PLUGIN_ADMIN.PACKAGES_SUCCESSFULLY_INSTALLED"|tu }}
                </p>

                <ul class="packages-names-list"></ul>
            </div>
        </div>

    </form>
</div>