{% import "macro_functions.html.twig" as mf %}
{% extends "layout_default.html.twig" %}
{% set active_menu = 'extensions' %}
{% block meta_title %}{{ 'Custom Pages'|trans }}{% endblock %}

{% block content %}
    <div class="card-tabs">

        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a href="#tab-index" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab">{{ 'Custom Pages'|trans }}</a></li>
            <li class="nav-item" role="presentation">
                <a href="#tab-new" class="nav-link" data-bs-toggle="tab" aria-selected="false" role="tab" tabindex="-1">
                    <svg class="icon me-2">
                        <use xlink:href="#plus"></use>
                    </svg>
                    {{ 'New Custom Page'|trans }}
                </a>
            </li>
        </ul>

        <div class="card">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                <div class="card-body border-bottom py-3">
                    <div class="d-flex">
                        {{ include('partial_batch_delete.html.twig', { 'action' : 'admin/custompages/batch_delete' }) }}
                        <div class="ms-auto text-muted">
                            <form method="get">
                                <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
                                <input type="hidden" name="_url" value="{{request._url}}">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search…" name="search">
                                    <button class="btn btn-icon">
                                        <svg class="icon">
                                            <use xlink:href="#search"></use>
                                        </svg>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table card-table table-vcenter text-nowrap datatable">
                        <thead>
                        <tr>
                            <th class="w-1">
                                <input type="checkbox" class="form-check-input m-0 align-middle batch-delete-master-checkbox">
                            </th>
                            <th class="w-1">{{ 'ID'|trans }}</th>
                            <th>{{ 'Title'|trans }}</th>
                            <th>{{ 'Slug'|trans }}</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% set pages = admin.custompages_get_list({"per_page":30, "page":request.page}|merge(request)) %}
                        {% for page in pages.list %}
                            <tr>
                                <td>
                                    <input type="checkbox" class="form-check-input m-0 align-middle batch-delete-checkbox" data-item-id="{{ page.id }}">
                                </td>
                                <td>{{ page.id }}</td>
                                <td>{{ page.title }}</td>
                                <td>{{ page.slug }}</td>
                                <td class="text-end">
                                    <a class="btn btn-icon" href="{{ 'page'|link }}/{{ page.slug }}"
                                       data-bs-toggle="tooltip" data-bs-title="{{ 'View'|trans }}">
                                        <svg class="icon">
                                            <use xlink:href="#eye"/>
                                        </svg>
                                    </a>
                                    <a class="btn btn-icon" href="{{ 'custompages'|alink }}/{{ page.id }}"
                                       data-bs-toggle="tooltip" data-bs-title="{{ 'Edit'|trans }}">
                                        <svg class="icon">
                                            <use xlink:href="#edit"/>
                                        </svg>
                                    </a>
                                    <a class="btn btn-icon bb-rm-tr api-link"
                                       href="{{ 'api/admin/custompages/delete'|link({ 'id': page.id, 'CSRFToken': CSRFToken }) }}"
                                       title="{{ 'Delete'|trans }}"
                                       data-api-confirm="Are you sure?"
                                       data-api-type="danger"
                                       data-api-confirm-btn="{{ 'Delete'|trans }}"
                                       data-api-reload="1"
                                       data-bs-toggle="tooltip" data-bs-title="{{ 'Delete'|trans }}">
                                        <svg class="icon">
                                            <use xlink:href="#delete"/>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td class="text-center py-3" colspan="5">
                                    <h4>{{ 'The list is empty'|trans }}</h4>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

                {{ include('partial_pagination.html.twig', { 'list': pages, 'url': 'custompages' }) }}
            </div>

            <div class="tab-pane fade" id="tab-new" role="tabpanel">
                <form method="post" action="{{ 'api/admin/custompages/create'|link }}" class="api-form save" data-api-redirect="{{ 'custompages'|alink }}">
                    <div class="card-body mt-2">
                        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
                        <div class="mb-3 row">
                            <label class="col-md-3 col-form-label">{{ 'Title'|trans }}</label>
                            <div class="col">
                                <input class="form-control" type="text" name="title" value="{{ request.title }}" required="required">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-md-3 col-form-label">{{ 'Meta Description'|trans }}</label>
                            <div class="col">
                                <input class="form-control" type="text" name="description" value="{{ request.description }}">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-md-3 col-form-label">{{ 'Meta Keywords'|trans }}</label>
                            <div class="col">
                                <input class="form-control" type="text" name="keywords" value="{{ request.keywords }}">
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label class="col-md-3 col-form-label">{{ 'Content'|trans }}</label>
                            <div class="col">
                                <textarea class="bb-textarea" name="content" cols="5" rows="5" required="required" placeholder="{{ 'Add page content'|trans }}"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-end">
                        <input type="submit" value="{{ 'Create'|trans }}" class="btn btn-primary"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>
{% endblock %}

{% block js %}{% endblock %}

{% block head %}{{ mf.bb_editor('.bb-textarea') }}{% endblock %}
