{{!
    This file is part of the tool_certificate plugin for Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template tool_certificate/edit_layout_page

    The certificate edit layout

    Classes required for JS:
    * None

    Data attibutes required for JS:

    Context variables required for this template:

    Example context (json):
    {
        "id": 1,
        "title": "Page 1",
        "editlabel": "Edit",
        "deletelabel": "Delete",
        "pagelayout": "Page layout editor",
        "haselements": 1,
        "elements": [
            {"name": "Element1", "type": "Type1", "id": 1},
            {"name": "Element2", "type": "Type2", "id": 2},
            {"name": "Element3", "type": "Type3", "id": 3}
        ]
    }
}}
<div class="card mb-3" data-region="page" data-id="{{id}}">
    <div class="card-header p-0" id="page-{{id}}-heading">
        <div class="mb-0 d-flex">
            <button class="btn btn-link text-start ws-toggle nomargin ms-1" data-bs-toggle="collapse" data-bs-target="#page-{{id}}" aria-expanded="true" aria-controls="page-{{id}}">
                <span class="togglesectionicon collapsed-icon-container">
                    <span class="dir-rtl-hide">{{#pix}} t/collapsed, core, {{#str}} expand, moodle {{/str}} {{/pix}}</span>
                    <span class="dir-ltr-hide">{{#pix}} t/collapsed_rtl, core, {{#str}} expand, moodle {{/str}} {{/pix}}</span>
                </span>
                <span class="togglesectionicon expanded-icon-container">
                    {{#pix}} t/expanded, core, {{#str}} collapse, moodle {{/str}}{{/pix}}
                </span>
                {{title}}
            </button>
            <span class="ms-auto my-auto">
                {{#moveupurl}}
                <a class="btn btn-link p-0" data-action="moveup" href="{{moveupurl}}" data-id="{{id}}" title="{{#str}}moveup{{/str}}">
                    {{#pix}} i/up, core {{/pix}}
                </a>
                {{/moveupurl}}
                {{#movedownurl}}
                <a class="btn btn-link p-0" data-action="movedown" href="{{movedownurl}}" data-id="{{id}}" title="{{#str}}movedown{{/str}}">
                    {{#pix}} i/down, core {{/pix}}
                </a>
                {{/movedownurl}}
                <a class="btn btn-link p-0" data-action="editpage" href="#" data-id="{{id}}" data-pagenumber="{{pagenumber}}" title="{{#str}}editpage, tool_certificate, {{pagenumber}}{{/str}}">
                    {{#pix}} i/settings, core {{/pix}}
                </a>
                {{#deleteurl}}
                <a class="btn btn-link p-0" data-action="deletepage" href="{{deleteurl}}" data-id="{{id}}" title="{{#str}}deletepage, tool_certificate{{/str}}">
                    {{#pix}} i/trash, core {{/pix}}
                </a>
                {{/deleteurl}}
            </span>
        </div>
    </div>
    <div id="page-{{id}}" class="collapse show" aria-labelledby="page-{{id}}-heading">
        <div class="card-body p-3">
            <div class="d-flex">
                <div>
                    {{> tool_certificate/edit_layout_elementlist}}
                    <div class="dropdown">
                        <button id="addelement{{id}}" class="btn btn-primary iconlarge nomargin" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{#str}}addelement, tool_certificate{{/str}}
                        </button>
                        <div class="dropdown-menu" aria-labelledby="addelement{{id}}" data-region="elementtypeslist">
                            {{#elementtypes}}
                                <a class="dropdown-item" data-action="addelement" data-pageid="{{id}}" data-element="{{type}}" href="#">{{{name}}}</a>
                            {{/elementtypes}}
                        </div>
                    </div>
                </div>
                <div class="ms-4" data-region="pagelayout" data-id="{{id}}">
                    {{> tool_certificate/edit_layout_pdf }}
                </div>
            </div>

        </div>
    </div>
</div>