{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}

{# 設定メニューからも遷移するため、遷移元に応じてナビを変更 #}
{% if app.request.query.get('return') == 'tradelaw' %}
    {% set menus = ['setting', 'shop', 'shop_tradelaw'] %}
{% elseif app.request.query.get('return') == 'agreement' %}
    {% set menus = ['setting', 'shop', 'shop_agreement'] %}
{% else %}
    {% set menus = ['content', 'page'] %}
{% endif %}

{% block title %}{{ 'admin.content.page_management'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.content.contents_management'|trans }}{% endblock %}

{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}

{% block stylesheet %}
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .ui-resizable-se {
            right: -3px;
            bottom: -3px;
        }
    </style>
{% endblock %}

{% block javascript %}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ext-language_tools.js"></script>
    <script>
        ace.require('ace/ext/language_tools');
        var editor = ace.edit('editor');
        editor.session.setMode('ace/mode/twig');
        editor.setTheme('ace/theme/tomorrow');
        editor.setValue('{{ form.tpl_data.vars.value|escape('js') }}');
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            showInvisibles: true
        });

        $("#editor").resizable({
            resize: function (event, ui) {
                editor.resize();
            }
        });

        $('#content_page_form').on('submit', function(elem) {
            $('#main_edit_tpl_data').val(editor.getValue());
        });
    </script>
{% endblock %}

{% block main %}
    <form id="content_page_form" method="post"
          action="{%- if page_id is not null %}{{ url('admin_content_page_edit', {id: page_id}) }}{% else %}{{ url('admin_content_page_new') }}{% endif -%}">
        {{ form_widget(form._token) }}

        <div class="c-contentsArea__cols">
            <div class="c-contentsArea__primaryCol">
                <div class="c-primaryCol">
                    <!-- ページ設定 -->
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-8"><span class="card-title">{{ 'admin.content.page__card_title'|trans }}</span></div>
                                <div class="col-4 text-right">
                                    <a data-toggle="collapse" href="#pageDetail" aria-expanded="false" aria-controls="pageDetail">
                                        <i class="fa fa-angle-up fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="collapse show ec-cardCollapse" id="pageDetail">
                            <div class="card-body">
                                <!-- ページ名 -->
                                <div class="row mb-2">
                                    <div class="col-2">
                                        <span>{{ 'admin.content.page_name'|trans }}</span>
                                        <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span>
                                    </div>
                                    <div class="col-10">
                                        {{ form_widget(form.name) }}
                                        {{ form_errors(form.name) }}
                                    </div>
                                </div>
                                <!-- URL -->
                                <div class="row mb-2">
                                    <div class="col-2">
                                        <span>{{ 'admin.content.page_url'|trans }}</span>
                                        <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span>
                                    </div>
                                    <div class="col-10">
                                        <div class="form-row">
                                            {% if is_user_data_page %}
                                                <div class="col-3 pr-0"><span class="align-middle">{{ url('homepage') }}{{ eccube_config.eccube_user_data_route }}/</span></div>
                                                <div class="col-9 pl-0">{{ form_widget(form.url) }}</div>
                                            {% else %}
                                                <div class="col pr-0"><span class="align-middle">{{ app.request.schemeAndHttpHost }}{{ app.request.basePath }}{{ url }}</span></div>
                                                <div>{{ form_widget(form.url, { type : 'hidden' } ) }}</div>
                                            {% endif %}
                                            {{ form_errors(form.url) }}
                                        </div>
                                    </div>
                                </div>
                                <!-- ファイル名 -->
                                <div class="row mb-2">
                                    <div class="col-2">
                                        <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.content.page_file_name'|trans }}">
                                            <span>{{ 'admin.content.page_file_name'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i>
                                        </div>
                                        <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span>
                                    </div>
                                    <div class="col-10">
                                        <div class="form-row">
                                            {% if is_user_data_page %}
                                                <div class="col-3 pr-0 align-middle"><span class="align-middle">{{ template_path }}/</span></div>
                                                <div class="col-7 pl-0">
                                                    {{ form_widget(form.file_name) }}
                                                </div>
                                                <div class="col-2 pl-0">.twig</div>
                                            {% else %}
                                                <div class="col pr-0 align-middle">
                                                    <span class="align-middle">{{ template_path }}/{{ form.file_name.vars.value }}.twig</span>
                                                    <div>{{ form_widget(form.file_name, { type : 'hidden' } ) }}</div>
                                                </div>
                                            {% endif %}
                                            {{ form_errors(form.file_name) }}
                                        </div>
                                    </div>
                                </div>
                                <!-- コード -->
                                <div class="row mb-2">
                                    <div class="col-2">
                                        <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.content.page_source_code'|trans }}">
                                            <span>{{ 'admin.content.page_source_code'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i>
                                        </div>
                                        <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span>
                                    </div>
                                    <div class="col-10">
                                        <div id="editor" style="height: 480px" class="form-control{{ has_errors(form.tpl_data) ? ' is-invalid' }}"></div>
                                        <div style="display: none">{{ form_widget(form.tpl_data) }}</div>
                                        {{ form_errors(form.tpl_data) }}
                                    </div>
                                </div>
                                {# エンティティ拡張の自動出力 #}
                                {% for f in form if f.vars.eccube_form_options.auto_render %}
                                    {% if f.vars.eccube_form_options.form_theme %}
                                        {% form_theme f f.vars.eccube_form_options.form_theme %}
                                        {{ form_row(f) }}
                                    {% else %}
                                        <div class="row">
                                            <div class="col-2"><span>{{ f.vars.label|trans }}</span></div>
                                            <div class="col-10">
                                                {{ form_widget(f) }}
                                                {{ form_errors(f) }}
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <!-- レイアウト設定 -->
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-8">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top"
                                         title="{{ 'tooltip.content.page_layout'|trans }}">
                                        <span class="card-title">
                                            {{ 'admin.content.page_layout__card_title'|trans }}
                                            <i class="fa fa-question-circle fa-lg ml-1"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-4 text-right">
                                    <a data-toggle="collapse" href="#pageLayout" aria-expanded="false" aria-controls="pageLayout">
                                        <i class="fa fa-angle-up fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="collapse show ec-cardCollapse" id="pageLayout">
                            <div class="card-body">
                                <!-- PC -->
                                <div class="row mb-2">
                                    <div class="col-2"><span>{{ 'admin.content.page_pc'|trans }}</span></div>
                                    <div class="col-10">
                                        {{ form_widget(form.PcLayout) }}
                                        {{ form_errors(form.PcLayout) }}
                                    </div>
                                </div>
                                <!-- モバイル -->
                                <div class="row mb-2">
                                    <div class="col-2"><span>{{ 'admin.content.page_mobile'|trans }}</span></div>
                                    <div class="col-10">
                                        {{ form_widget(form.SpLayout) }}
                                        {{ form_errors(form.SpLayout) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- メタ設定 -->
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-8">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.content.page_meta'|trans }}">
                                        <span class="card-title">{{ 'admin.content.page_meta__card_title'|trans }}</span>
                                        <i class="fa fa-question-circle fa-lg ml-1"></i>
                                    </div>
                                </div>
                                <div class="col-4 text-right">
                                    <a data-toggle="collapse" href="#pageMeta" aria-expanded="false" aria-controls="pageMeta">
                                        <i class="fa fa-angle-up fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="collapse show ec-cardCollapse" id="pageMeta">
                            <div class="card-body">
                                <!-- author -->
                                <div class="row mb-2">
                                    <div class="col-2"><span>{{ 'admin.content.page_meta_author'|trans }}</span></div>
                                    <div class="col-10">
                                        {{ form_widget(form.author) }}
                                        {{ form_errors(form.author) }}
                                    </div>
                                </div>
                                <!-- description -->
                                <div class="row mb-2">
                                    <div class="col-2"><span>{{ 'admin.content.page_meta_description'|trans }}</span></div>
                                    <div class="col-10">
                                        {{ form_widget(form.description) }}
                                        {{ form_errors(form.description) }}
                                    </div>
                                </div>
                                <!-- keyword -->
                                <div class="row mb-2">
                                    <div class="col-2"><span>{{ 'admin.content.page_meta_keyword'|trans }}</span></div>
                                    <div class="col-10">
                                        {{ form_widget(form.keyword) }}
                                        {{ form_errors(form.keyword) }}
                                    </div>
                                </div>
                                <!-- robot -->
                                <div class="row mb-2">
                                    <div class="col-2"><span>{{ 'admin.content.page_meta_robot'|trans }}</span></div>
                                    <div class="col-10">
                                        {{ form_widget(form.meta_robots) }}
                                        {{ form_errors(form.meta_robots) }}
                                    </div>
                                </div>
                                <!-- metatag -->
                                <div class="row">
                                    <div class="col-2">
                                        <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.content.page_meta_tags'|trans }}">
                                            <span>{{ 'admin.content.page_meta_metatag'|trans }}</span>
                                            <i class="fa fa-question-circle fa-lg ml-1"></i>
                                        </div>
                                    </div>
                                    <div class="col-10">
                                        {{ form_widget(form.meta_tags, { attr : { placeholder : 'admin.content.page_meta_metatag_placeholder'|trans, rows : '10' }}) }}
                                        {{ form_errors(form.meta_tags) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-conversionArea">
            <div class="c-conversionArea__container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-6">
                        <div class="c-conversionArea__leftBlockItem">
                            <a class="c-baseLink" href="{{ url('admin_content_page') }}">
                                <i class="fa fa-backward" aria-hidden="true"></i>
                                <span>{{ 'admin.content.page_management'|trans }}</span>
                            </a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div id="ex-conversion-action" class="row align-items-center justify-content-end">
                            <div class="col-auto">
                                <button class="btn btn-ec-conversion px-5" type="submit">{{ 'admin.common.registration'|trans }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
