{#
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' %}

{% set menus = ['content', 'layout'] %}

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

{% block javascript %}
    <script>
        $(function() {
            // 削除モーダルのhrefとmessageの変更
            $('#DeleteModal').on('shown.bs.modal', function(event) {
                var target = $(event.relatedTarget);
                // hrefの変更
                $(this).find('[data-method="delete"]').attr('href', target.data('url'));

                // messageの変更
                $(this).find('p.modal-message').text(target.data('message'));
            });
        });
    </script>
{% endblock %}

{% block main %}
    <div class="c-contentsArea__cols">
        <div class="c-contentsArea__primaryCol">
            <div class="c-primaryCol">
                <div class="d-block mb-3">
                    <a class="btn btn-ec-regular" href="{{ url('admin_content_layout_new') }}">{{ 'admin.common.create__new'|trans }}</a>
                </div>
                {# layouts #}
                {% for Layout in Layouts %}
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-8">
                                    {% if Layout.DeviceType.id == constant('Eccube\\Entity\\Master\\DeviceType::DEVICE_TYPE_PC') %}
                                        {% set icon = 'fa-desktop' %}
                                    {% else %}
                                        {% set icon = 'fa-mobile' %}
                                    {% endif %}
                                    <i class="fa fa-fw {{ icon }} fa-lg mr-2"></i>
                                    <a class="card-title align-middle"
                                       href="{{ url('admin_content_layout_edit', { id : Layout.id } ) }}">{{ Layout.name }}</a>
                                </div>
                                <div class="col-4 text-right">
                                    {% if Layout.isDefault() == false %}
                                        <button class="btn btn-ec-sub mr-3" type="button" data-toggle="modal" data-target="#DeleteModal"
                                                data-url="{{ url('admin_content_layout_delete', { id: Layout.id }) }}"
                                                data-message="{{ 'admin.common.delete_modal__message'|trans({ '%name%' : Layout.name }) }}">
                                            <i class="fa fa-close fa-lg text-secondary" aria-hidden="true"></i>
                                            {{ 'admin.content.layout_delete'|trans }}
                                        </button>
                                    {% endif %}
                                    <a href="#layout-{{ Layout.id }}" data-toggle="collapse" aria-expanded="false" aria-controls="layout-{{ Layout.id }}">
                                        <i class="fa fa-angle-down fa-lg"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        {# Pages #}
                        {% if Layout.pages|length > 0 %}
                            <div class="collapse ec-cardCollapse" id="layout-{{ Layout.id }}">
                                {% for Page in Layout.pages %}
                                    <div class="card-body p-0">
                                        <div class="row justify-content-between p-3">
                                            <div class="col-auto">
                                                <a href="{{ url('admin_content_page_edit', { id: Page.id }) }}">{{ Page.name }}</a>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="collapse ec-cardCollapse" id="layout-{{ Layout.id }}">
                                <div class="p-0 empty-item">
                                    <div class="d-block p-3">
                                        <span class="text-muted">{{ 'admin.content.layout_no_page'|trans }}</span>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}

                <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="DeleteModal" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">{{ 'admin.common.delete_modal__title'|trans }}</h5>
                                <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                            </div>
                            <div class="modal-body">
                                <p class="modal-message"><!-- jsでメッセージを挿入 --></p>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-ec-sub w-25" type="button" data-dismiss="modal">{{ 'admin.common.cancel'|trans }}</button>
                                <a href="#" class="btn btn-ec-delete" {{ csrf_token_for_anchor() }} data-method="delete" data-confirm="false">
                                    {{ 'admin.common.delete'|trans }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
