{% extends 'partials/base.html.twig' %}

{% if admin.route %}
    {% set context = admin.page(true) %}
{% endif %}

{% if uri.param('new') %}
    {% set mode = 'new' %}
{%  elseif context %}
    {% set mode = 'edit' %}
    {% if context.exists %}
        {% set page_url = base_url ~ '/pages' ~ (context.header.routes.default ?: context.rawRoute) %}
        {% set exists = true %}
        {% set title = (context.exists ? "PLUGIN_ADMIN.EDIT"|tu : "PLUGIN_ADMIN.CREATE"|tu ) ~ " " ~ (context.header.title ?: context.title) %}
    {% else %}
        {% set title = "PLUGIN_ADMIN.ADD_PAGE"|tu %}
    {% endif %}
{% else %}
    {% set mode = 'list' %}
{% endif %}

{% set modular = context.modular ? 'modular_' : '' %}

{% set warn = config.plugins.admin.warnings.delete_page %}

{% set admin_lang = admin.session.admin_lang ?: 'en' %}

{% set page_lang = context.language %}

{% block stylesheets %}
    {% if mode == 'edit' %}
        {% do assets.addCss(theme_url~'/css/codemirror/codemirror.css') %}
    {% endif %}
    {{ parent() }}
{% endblock %}

{% block javascripts %}
    {% do assets.addJs(theme_url~'/js/pages-all.js') %}
    {% do assets.addJs(theme_url~'/js/speakingurl.min.js') %}
    {% do assets.addJs(theme_url~'/js/slugify.min.js') %}
    {% if mode == 'edit' %}
        {% do assets.addJs(theme_url~'/js/codemirror-compressed.js') %}
        {% do assets.addJs(theme_url~'/js/mdeditor.js') %}
        {% do assets.addJs(theme_url~'/js/dropzone.min.js') %}
    {% endif %}
    {{ parent() }}
{% endblock %}

{% set preview_html = (base_url_relative_frontend|rtrim('/') ~ (context.home ? '' : context.route)) ?: '/' %}
{% set preview_link = context.routable ? '<a class="preview" target="_blank" href="' ~ preview_html ~ '"><i class="fa fa-fw fa-angle-double-right"></i></a>' : '' %}

{% macro loop(page, depth, twig_vars) %}
    {% set separator = twig_vars['config'].system.param_sep %}
    {% set base_url = twig_vars['base_url_relative'] %}
    {% set base_url_simple = twig_vars['base_url_simple'] %}
    {% set admin_route = twig_vars['admin_route'] %}
    {% set admin_lang = twig_vars['admin_lang'] %}
    {% set warn = twig_vars['warn'] %}



    {% for p in page.children() %}
        {% set description = (not p.page ? 'Folder &bull; ' : 'Page &bull; ') ~
                             (p.modular ? 'Modular &bull; ' : '') ~
                             (p.routable ? 'Routable &bull; ' : 'Non-Routable &bull; ') ~
                             (p.visible ? 'Visible &bull; ' : 'Non-Visible &bull; ') ~
                             (p.published ? 'Published &bull; ' : 'Non-Published &bull; ') %}
        {% set page_route =  p.rawRoute|trim('/') %}
        {% if p.language and p.language != admin_lang %}
            {% set page_url = base_url_simple ~ '/' ~ p.language ~ '/' ~ admin_route ~ '/pages/' ~ page_route %}
        {% else %}
            {% set page_url = base_url ~ '/pages/' ~ page_route  %}
        {% endif %}

        <li class="page-item" data-nav-id="{{ p.route }}">
            <div class="row">
                <span {{ p.children(0).count > 0 ? 'data-toggle="children"' : ''}} data-hint="{{ description|trim(' &bull; ') }}" class="hint--bottom">
                <i class="page-icon fa fa-fw fa-circle-o {{ p.children(0).count > 0 ? 'children-closed' : ''}} {{ p.modular ? 'modular' : (not p.routable ? 'not-routable' : (not p.visible ? 'not-visible' : (not p.page ? 'folder' :  ''))) }}"></i>
                </span>
                <a href="{{ page_url }}" class="page-edit">{{ p.title }}</a>

                {% if p.language %}
                    <span class="badge lang {% if p.language == admin_lang %}info{% endif %}">{{p.language ?: default_site_lang}}</span>
                {% endif %}
                <span class="page-home">{{ p.home ? '<i class="fa fa-home"></i>' }}</span>
                <span class="page-tools">

                    {% if warn %}
                    <a href="#delete" data-remodal-target="delete" data-delete-url="{{ page_url }}/task{{ separator }}delete" class="page-delete" ><i class="fa fa-close"></i></a>
                    {% else %}
                    <a href="{{ page_url }}/task{{ separator }}delete" class="page-delete" ><i class="fa fa-close"></i></a>
                    {% endif %}
                </span>
                <p class="page-route">{{ p.header.routes.default ?: p.route }} <span class="spacer"><i class="fa fa-long-arrow-right"></i></span> {{ p.template() }}</p>
            </div>
            {% if p.children().count > 0 %}

            <ul class="depth-{{ depth + 1 }}" style="display:none;">
                {{ _self.loop(p, depth + 1, twig_vars) }}
            </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endmacro %}


{% block titlebar %}

    <div class="button-bar">
        {% if mode == 'list' %}
            <a class="button" href="{{ base_url }}"><i class="fa fa-reply"></i> {{ "PLUGIN_ADMIN.BACK"|tu }}</a>
            <a class="button" href="#modal" data-remodal-target="modal"><i class="fa fa-plus"></i> {{ "PLUGIN_ADMIN.ADD_PAGE"|tu }}</a>
            {% if admin.modularTypes is not empty %}
            <a class="button" href="#modular" data-remodal-target="modular"><i class="fa fa-plus"></i> {{ "PLUGIN_ADMIN.ADD_MODULAR"|tu }}</a>
            {% endif %}

            {% if admin.multilang %}
                <div class="button-group">
                    <button type="button" class="button disabled">
                        <i class="fa fa-flag-o"></i>
                        {% set langName = admin.siteLanguages[admin_lang] %}
                        {{ langName[:1]|upper ~ langName[1:] }}
                    </button>
                    <button type="button" class="button dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <ul class="dropdown-menu language-switcher">
                        {% for langCode in admin.languages_enabled %}
                            {% set langName = admin.siteLanguages[langCode] %}
                            {% if langCode != admin_lang %}
                                <li><a href="{{ base_url_relative }}{{ theme.slug }}/pages/task{{ config.system.param_sep }}switchlanguage/lang{{ config.system.param_sep }}{{langCode}}">{{ langName[:1]|upper ~ langName[1:] }}</a></li>
                            {% endif %}
                        {% endfor %}
                    </ul>

                </div>
            {% endif %}

        {% elseif mode == 'edit' %}


            <a class="button" href="{{ base_url }}/pages"><i class="fa fa-reply"></i> {{ "PLUGIN_ADMIN.BACK"|tu }}</a>
            {% if exists %}
                <a class="button" href="{{ page_url }}/task{{ config.system.param_sep }}copy" class="page-copy" ><i class="fa fa-copy"></i> {{ "PLUGIN_ADMIN.COPY"|tu }}</a>
                <a class="button" href="#" data-remodal-target="move"><i class="fa fa-arrows"></i> {{ "PLUGIN_ADMIN.MOVE"|tu }}</a>
                {% if warn %}
                    <a class="button" href="#delete" data-remodal-target="delete" data-delete-url="{{ page_url }}/task{{ config.system.param_sep }}delete"><i class="fa fa-close"></i> {{ "PLUGIN_ADMIN.DELETE"|tu }}</a>
                {% else %}
                    <a class="button" href="{{ uri.route(true) }}/task{{ config.system.param_sep }}delete" class="page-delete" ><i class="fa fa-close"></i></a>
                {% endif %}
            {% endif %}

            <div class="button-group">
                <button class="button" name="task" value="save" form="blueprints" type="submit"><i class="fa fa-check"></i> {{ "PLUGIN_ADMIN.SAVE"|tu }}</button>
                {% if exists and admin.multilang %}
                    {% if context.untranslatedLanguages %}
                        <button type="button" class="button dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <ul class="dropdown-menu lang-switcher">
                            {% for langCode in context.untranslatedLanguages %}
                                {% set langName = admin.siteLanguages[langCode] %}
                                {% if langCode != page_lang %}
                                    <li><button class="button task" name="task" value="saveas" lang="{{langCode}}" form="blueprints" type="submit">{{ "PLUGIN_ADMIN.SAVE_AS"|tu }} {{ langName[:1]|upper ~ langName[1:] }}</button>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    {% endif %}
                {% endif %}
            </div>


        {% endif %}
    </div>
    {% if mode == 'new' %}
        <h1><i class="fa fa-fw fa-file-text-o"></i> {{ "PLUGIN_ADMIN.ADD_PAGE"|tu }}</h1>
    {% elseif mode == 'edit' %}
        <h1><i class="fa fa-fw fa-file-text-o"></i>
            {{ context.exists ? "PLUGIN_ADMIN.EDIT"|tu ~ " <i>#{context.menu}</i>" ~ preview_link : "PLUGIN_ADMIN.CREATE"|tu ~ " <i>#{context.menu}</i>" }}
        </h1>
    {% else %}
        <h1><i class="fa fa-fw fa-file-text-o"></i> {{ "PLUGIN_ADMIN.MANAGE_PAGES"|tu }}</h1>
    {% endif %}
{% endblock %}

{% block content %}

    {% set default_site_lang = grav.config.system.languages|first|first %}
    <div class="admin-block clear">
    {% include 'partials/messages.html.twig' %}
    {% if mode == 'new' %}
        {% include 'partials/blueprints-new.html.twig' with { blueprints: admin.blueprints('pages/page'), data: context } %}
    {% elseif mode == 'edit' %}
        <div class="admin-form-wrapper" data-media-url="{{ base_url }}/media/{{ admin.route|trim('/') }}.json" data-media-local="{{ base_url_relative_frontend }}/{{ admin.route|trim('/') }}" data-media-types="{{ media_types }}">
            <div id="admin-topbar">

                {% if admin.multilang and page_lang %}
                    <div id="admin-lang-toggle" class="button-group">
                        <button type="button" class="button disabled">
                            {% if exists %}
                                {{ page_lang }}
                            {% else %}
                                {{ admin_lang }}
                            {% endif %}
                        </button>
                        {% if exists and context.translatedLanguages|length > 1 %}
                            <button type="button" class="button dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-caret-down"></i>
                            </button>
                            <ul class="dropdown-menu language-switcher">
                                {% for language, route in context.translatedLanguages %}
                                    {% if language != page_lang %}
                                    <li><button class="task" name="task" value="switchlanguage" lang="{{language}}" redirect="{{context.rawRoute|trim('/')}}" form="blueprints">{{ language }}</button>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </div>
                {% endif %}

                {% if context.blueprints.fields %}
                <form id="admin-mode-toggle">
                    <div class="switch-toggle switch-grav">
                        <input type="radio" value="normal" data-leave-url="{{ base_url }}/pages/{{ admin.route|trim('/') }}/mode{{ config.system.param_sep }}normal" id="normal" name="mode-switch" class="highlight" {% if admin.session.expert == '0' %} checked="checked"{% endif %}>
                        <label for="normal">{{ "PLUGIN_ADMIN.NORMAL"|tu }}</label>
                        <input type="radio" value="expert" data-leave-url="{{ base_url }}/pages/{{ admin.route|trim('/') }}/mode{{ config.system.param_sep }}expert" id="expert" name="mode-switch" class="highlight" {% if admin.session.expert == '1' %} checked="checked"{% endif %}>
                        <label for="expert">{{ "PLUGIN_ADMIN.EXPERT"|tu }}</label>
                        <a></a>
                    </div>
                </form>
                {% endif %}

            </div>

            {% if context.blueprints.fields and admin.session.expert == '0' %}
                {% include 'partials/blueprints.html.twig' with { blueprints: context.blueprints, data: context } %}
            {% else %}
                {% include 'partials/blueprints-raw.html.twig' with { blueprints: admin.blueprints('pages/'~modular~'raw'), data: context } %}
            {% endif %}
        </div>
    {% else %}
        <form id="page-filtering">
            <div class="page-filters">
                <input type="text" data-template-types="{{ admin.types|merge(admin.modularTypes)|json_encode|e('html_attr') }}" placeholder="{{ "PLUGIN_ADMIN.ADD_FILTERS"|tu }}" class="page-filter" name="page-filter" />
            </div>
            <div class="page-search">
                <input type="text" placeholder="{{ "PLUGIN_ADMIN.SEARCH_PAGES"|tu }}" name="page-search" />
            </div>
            <div class="page-shortcuts">
                <span class="button button-x-small" data-page-toggleall="expand"><i class="fa fa-fw fa-plus-circle"></i> {{ "PLUGIN_ADMIN.EXPAND_ALL"|tu }}</span>
                <span class="button button-x-small" data-page-toggleall="collapse"><i class="fa fa-fw fa-minus-circle"></i> {{ "PLUGIN_ADMIN.COLLAPSE_ALL"|tu }}</span>
            </div>
        </form>
        <ul class="pages-list depth-0">
            {{ _self.loop(pages, 0, _context) }}
        </ul>
    {% endif %}
    </div>

    <div class="remodal" data-remodal-id="generic" data-remodal-options="hashTracking: false">
        <form>
            <h1>{{ "PLUGIN_ADMIN.ERROR"|tu }}</h1>
            <div class="error-content"></div>
            <div class="button-bar">
                <a class="button remodal-confirm" href="#">{{ "PLUGIN_ADMIN.CLOSE"|tu }}</a>
            </div>
        </form>
    </div>

    {% if mode == 'list' %}
    <div class="remodal" data-remodal-id="modal" data-remodal-options="hashTracking: false">
        {% include 'partials/blueprints-new.html.twig' with { blueprints: admin.blueprints('pages/new'), data: context } %}
    </div>

    <div class="remodal" data-remodal-id="modular" data-remodal-options="hashTracking: false">
        {% include 'partials/blueprints-new.html.twig' with { blueprints: admin.blueprints('pages/modular_new'), data: context } %}
    </div>
    {% endif %}

    {% if mode == 'edit' %}
    <div class="remodal" data-remodal-id="move" data-remodal-options="hashTracking: false">

        {% include 'partials/page-move.html.twig' with { blueprints: admin.blueprints('pages/move'), data: context } %}
    </div>
    {% endif %}

    <div class="remodal" data-remodal-id="delete" data-remodal-options="hashTracking: false">
        <form>
            <h1>{{ "PLUGIN_ADMIN.MODAL_DELETE_PAGE_CONFIRMATION_REQUIRED_TITLE"|tu }}</h1>
            <p class="bigger">
              {{ "PLUGIN_ADMIN.MODAL_DELETE_PAGE_CONFIRMATION_REQUIRED_DESC"|tu }}
            </p>
            <br>
            <div class="button-bar">
            <a class="button secondary remodal-cancel" href="#"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|tu }}</a>
            <a class="button" data-delete-action href="#"><i class="fa fa-fw fa-check"></i> {{ "PLUGIN_ADMIN.CONTINUE"|tu }}</a>
            </div>
        </form>
    </div>


    <div class="remodal" data-remodal-id="changes">
        <form>
            <h1>{{ "PLUGIN_ADMIN.MODAL_CHANGED_DETECTED_TITLE"|tu }}</h1>
            <p class="bigger">
                {{ "PLUGIN_ADMIN.MODAL_CHANGED_DETECTED_DESC"|tu }}
            </p>
            <br>
            <div class="button-bar">
            <a class="button secondary" data-leave-action="cancel" href="#"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|tu }}</a>
            <a class="button" data-leave-action="continue" href="#"><i class="fa fa-fw fa-check"></i> {{ "PLUGIN_ADMIN.CONTINUE"|tu }}</a>
            </div>
        </form>
    </div>

    <div class="remodal" data-remodal-id="delete-media" data-remodal-options="hashTracking: false">
        <form>
            <h1>{{ "PLUGIN_ADMIN.MODAL_DELETE_FILE_CONFIRMATION_REQUIRED_TITLE"|tu }}</h1>
            <p class="bigger">
                {{ "PLUGIN_ADMIN.MODAL_DELETE_FILE_CONFIRMATION_REQUIRED_DESC"|tu }}
            </p>
            <br>
            <div class="button-bar">
            <a class="button secondary remodal-cancel" href="#"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|tu }}</a>
            <a class="button remodal-confirm" href="#"><i class="fa fa-fw fa-check"></i> {{ "PLUGIN_ADMIN.CONTINUE"|tu }}</a>
            </div>
        </form>
    </div>
{% endblock %}