{% set categories = {
  'general': { 'mn': 'Ерөнхий' },
  'featured': { 'mn': 'Онцолсон' },
  'attach': { 'mn': 'Хавсралт' },
  'special': { 'mn': 'Тусгай' }
} %}
{% set types = {
  'menu': { 'mn': 'Үндсэн цэс' },
  'top-menu': { 'mn': 'Толгойн цэс' },
  'footer-menu': { 'mn': 'Хөлийн цэс' },
  'dropdown-menu': { 'mn': 'Унжих цэс' },
  'mega-menu': { 'mn': 'Мега цэс' }
} %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sceditor@latest/minified/themes/default.min.css">
<script defer src="https://cdn.jsdelivr.net/combine/npm/sceditor@latest/minified/sceditor.min.js,npm/sceditor@latest/minified/formats/xhtml.min.js,npm/sceditor@latest/minified/icons/monocons.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
<script defer src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<div class="d-flex flex-wrap justify-content-between align-items-center text-uppercase rounded p-1 mb-2 shadow">
    <h3 class="px-2 my-auto fs-6 text-info text-uppercase">
        <i class="bi bi-eye"></i> {{ record['title']|e }}
    </h3>
    <div class="ms-auto">
        <a class="btn btn-sm btn-info shadow-sm" href="{{ 'pages'|link }}">
            <i class="bi bi-arrow-left"></i> {{ 'pages'|text }}
        </a>
    </div>
</div>
<div class="row mt-1">
    <div class="col-8">
        <div class="form-floating">
            <input class="form-control" name="parent_id" readonly value="{{ (infos[record['parent_id']] is not null ? infos[record['parent_id']]['parent_titles'] ~ infos[record['parent_id']]['title'] : '-')|e }}" placeholder="" type="text" autocomplete="off">
            <label>{{ 'parent'|text }}</label>
        </div>
    </div>
    <div class="col-2">
        <div class="form-floating">
            <input class="form-control" name="type" readonly value="{{ (types[record['type']][localization.code] ?? record['type'])|e }}" placeholder="" type="text" autocomplete="off">
            <label>{{ 'type'|text }}</label>
        </div>
    </div>
    <div class="col-2">
        <div class="form-floating">
            <input class="form-control" name="position" readonly value="{{ record['position']|e }}" placeholder="" type="number" autocomplete="off">
            <label>{{ 'position'|text }}</label>
        </div>
    </div>
</div>
<div class="row mt-3">
    <div class="col-2">
        <label class="form-label">{{ 'language'|text }}</label>
        <span class="form-control">
            {% set flag = record['code'] == 'en' ? 'us' : record['code'] %}
            {% set lang = (localization.language[record['code']] ?? record['code'])|e %}
            <img src="https://flagcdn.com/20x15/{{ flag }}.png" srcset="https://flagcdn.com/40x30/{{ flag }}.png 2x" width="16" height="12" alt="{{ lang }}">
            {{ lang }}
        </span>
    </div>
    <div class="col-3">
        <label class="form-label">{{ 'date'|text }}</label>
        <input class="form-control" name="published_at" value="{{ record['published_at']|e }}" readonly placeholder="" type="datetime-local" autocomplete="off">
    </div>
    <div class="col-3">
        <label class="form-label">{{ 'category'|text }}</label>
        <input class="form-control" name="category" readonly type="text" value="{{ (categories[record['category']][localization.code] ?? record['category'])|e }}" maxlength="32">
    </div>
    <div class="col-4">
        <label class="form-label">{{ 'publish'|text }}</label>
        <div class="form-check form-switch">
            <input class="form-check-input"{{ record['published'] == 1 ? ' checked' : '' }} disabled name="published" type="checkbox" role="switch" aria-describedby="IsVisibleHelp">
            <div class="form-text" id="IsVisibleHelp">{{ localization.code == 'mn' ? 'бичлэг сайт дээр харагдах эсэх' : 'visiblity of content' }}</div>
        </div>
    </div>
</div>
<ul class="nav nav-tabs nav-tabs-content mt-3">
    <li class="nav-item">
        <a class="nav-link active show" data-bs-toggle="tab" href="#tab-contents">{{ 'content'|text }}</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tab-files">{{ 'files'|text }} <i class="bi bi-paperclip"></i></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tab-meta">{{ 'meta'|text }} <i class="bi bi-share"></i></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tab-comment">{{ 'comment'|text }} <i class="bi bi-chat-left-text"></i></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tab-link">{{ 'link'|text }} <i class="bi bi-link-45deg"></i></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tab-history">{{ 'history'|text }} <i class="bi bi-clock-history"></i></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#tab-version">{{ 'version'|text }} <i class="bi bi-sort-numeric-down"></i></a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active show" id="tab-contents">
        <div class="form-group mt-3">
            <label class="form-label">{{ 'title'|text }}</label>
            <input class="form-control" name="title" readonly value="{{ record['title']|e }}" maxlength="255" placeholder="" type="text" autocomplete="off">
        </div>
        <div class="form-group mt-3">
            <label class="form-label">{{ 'description'|text }}</label>
            <textarea class="form-control" name="description" readonly>{{ record['description']|e }}</textarea>
        </div>
        <div class="form-group mt-3">
            <label class="form-label">{{ 'photo'|text }}</label>
            <br/>
            {% if record['photo'] is not empty %}
                <img class="img-fluid img-thumbnail" src="{{ record['photo']|e }}">
            {% else %}
                <img class="img-fluid img-thumbnail" src="https://via.placeholder.com/50?text=no%20photo">
            {% endif %}
        </div>
        <div class="form-group mt-3">
            <label class="form-label">{{ 'content'|text }}</label>
            <textarea class="form-control" id="content" name="content" readonly rows="10">{{ record['content']|e }}</textarea>
        </div>
    </div>
    <div class="tab-pane pt-2" id="tab-files">
        <table class="table table-sm table-striped table-hover" id="pages_files">
            <thead>
                <tr>
                    <th>{{ 'file'|text }}</th>
                    <th>{{ 'properties'|text }}</th>
                    <th>{{ 'description'|text }}</th>
                    <th>{{ 'category'|text }}</th>
                    <th>{{ 'keyword'|text }}</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="tab-pane" id="tab-meta">
        <div class="alert alert-secondary shadow-sm fade mt-3 show" role="alert">
            <i class="bi bi-exclamation-triangle" style="margin-right:.3rem"></i>
            {% if localization.code == 'mn' %}
                Уучлаарай, энэ үйлдэл одоохондоо ажиллагаанд ороогүй байна
            {% else %}
                Sorry, this feature isn’t available right now
            {% endif %}
        </div>
    </div>
    <div class="tab-pane" id="tab-comment">
        <div class="alert alert-primary shadow-sm fade mt-3 show" role="alert">
            <i class="bi bi-exclamation-triangle" style="margin-right:.3rem"></i>
            {% if localization.code == 'mn' %}
                Уучлаарай, энэ үйлдэл одоохондоо ажиллагаанд ороогүй байна
            {% else %}
                Sorry, this feature isn’t available right now
            {% endif %}
        </div>
    </div>
    <div class="tab-pane" id="tab-link">
        <div class="alert alert-warning shadow-sm fade mt-3 show" role="alert">
            <i class="bi bi-exclamation-triangle" style="margin-right:.3rem"></i>
            {% if localization.code == 'mn' %}
                Уучлаарай, энэ үйлдэл одоохондоо ажиллагаанд ороогүй байна
            {% else %}
                Sorry, this feature isn’t available right now
            {% endif %}
        </div>
    </div>
    <div class="tab-pane" id="tab-history">
        <div class="row mt-3">
            <label class="col-3 col-form-label text-end">{{ 'date-created'|text }}</label>
            <div class="col-9">
                <input class="form-control" readonly value="{{ record['created_at']|e }}" type="text">
            </div>
        </div>
        <div class="row mt-3">
            <label class="col-3 col-form-label text-end">{{ 'created-by'|text }}</label>
            <div class="col-9">
                <input class="form-control" readonly value="{{ (record['rbac_users'][record['created_by']] ?? record['created_by'])|e }}" type="text">
            </div>
        </div>
        <div class="row mt-3">
            <label class="col-3 col-form-label text-end">{{ 'date-modified'|text }}</label>
            <div class="col-9">
                <input class="form-control" readonly value="{{ record['updated_at']|e }}" type="text">
            </div>
        </div>
        <div class="row mt-3">
            <label class="col-3 col-form-label text-end">{{ 'updated-by'|text }}</label>
            <div class="col-9">
                <input class="form-control" readonly value="{{ (record['rbac_users'][record['updated_by']] ?? record['updated_by'])|e }}" type="text">
            </div>
        </div>
    </div>
    <div class="tab-pane" id="tab-version">
        <div class="alert alert-info shadow-sm fade mt-3 show" role="alert">
            <i class="bi bi-exclamation-triangle" style="margin-right:.3rem"></i>
            {% if localization.code == 'mn' %}
                Уучлаарай, энэ үйлдэл одоохондоо ажиллагаанд ороогүй байна
            {% else %}
                Sorry, this feature isn’t available right now
            {% endif %}
        </div>
    </div>
</div>
<script type="text/javascript">
    function copy(elem) {
        let text = document.getElementById(elem);
        if (document.body.createTextRange) {
            let range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) {
            let selection = window.getSelection();
            let range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
        document.execCommand('copy');
    }

    function basename(url) {
        return url.split(/.*[\/|\\]/)[1];
    }

    function formatSizeUnits(bytes)
    {
        const thresh = 1024;
        if (Math.abs(bytes) < thresh) {
            return bytes + 'b';
        }

        const units = ['kb', 'mb', 'gb', 'tb'];
        let u = -1;
        const r = 10 ** 1;
        do {
            bytes /= thresh;
            ++u;
        } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);

        return bytes.toFixed(1) + units[u];
    }
    
    function escape(s) {
        let lookup = {
            '&': "&amp;",
            '"': "&quot;",
            '\'': "&apos;",
            '<': "&lt;",
            '>': "&gt;"
        };
        return s.replace(/[&"'<>]/g, c => lookup[c]);
    }

    document.addEventListener('DOMContentLoaded', function () {
        let content = document.getElementById('content');
        sceditor.create(content, {
            format: 'xhtml',
            emoticonsEnabled: false,
            toolbarExclude: 'emoticon',
            icons: 'monocons',
            readOnly: true,
            width: '100%',
            height: '360px',
            style: 'https://cdn.jsdelivr.net/npm/sceditor@latest/minified/themes/content/default.min.css'
        });
        
        let pageFilesLink = `{{ 'files-modal'|link({'table':'pages'}) }}`;
        motable.prototype.append = function (record) {
            let fileIcon;
            let fileName = escape(basename(record['path']));
            let fileLinkAttr = `target="__blank" onclick="return confirm('Are you sure you want to open this file [${fileName}]?')"`;
            let fileAction = ` <a class="btn btn-sm btn-dark ajax-modal" data-bs-target="#static-modal" data-bs-toggle="modal" href="${pageFilesLink}?modal=${record['type']}-tag&id=${record['id']}"><i class="bi bi-code"></i></a>`;
            switch (record['type']) {
                case 'image':
                    {
                        fileIcon = `<img src="${record['path']}" style="max-height:7.5rem;height:100%">`;
                        if (record['mime_content_type'] !== 'image/gif') {
                            if (record['description']) {
                                fileLinkAttr = `file-data-fancybox data-caption="${escape(record['description'])}"`;
                            } else {
                                fileLinkAttr = `file-data-fancybox data-caption="${fileName}"`;
                            }
                        }
                    }
                    break;
                case 'video':
                    fileIcon = `<video style="max-height:15px;height:100%;max-width:20rem;width:100%" controls><source src="${record['path']}"></video>`;
                    break;
                case 'audio':
                    fileIcon = `<audio controls><source src="${record['path']}" type="${record['mime_content_type']}"></audio>`;
                    break;
                default:
                    {
                        fileIcon = '<i class="bi bi-hdd"></i>';
                        fileAction = '';
                    }
                    break;
            }        
            fileAction = `<a class="btn btn-sm btn-info ajax-modal" data-bs-target="#static-modal" data-bs-toggle="modal" href="${pageFilesLink}?modal=location&id=${record['id']}"><i class="bi bi-link"></i></a>${fileAction}`;

            let fileFigure = `<a href="${record['path']}" ${fileLinkAttr}>${fileIcon}`;
            fileFigure += ` <span style="display:block">${fileName}</span></a> ${fileAction}`;

            let row = document.createElement('tr');
            row.id = `file_${record['id']}`;
            row.style.fontSize = '.875rem';
            let cell1 = document.createElement('td');
            cell1.innerHTML = `<input name="files[]" value="${record['id']}" type="hidden">${fileFigure}`;
            row.appendChild(cell1);

            let cell2 = document.createElement('td');
            cell2.innerHTML = `<p style="max-width:11.25rem;word-wrap:break-all"><u>${record['mime_content_type']}</u></p>${formatSizeUnits(record['size'])}`;
            row.appendChild(cell2);

            let cell3 = document.createElement('td');
            cell3.innerHTML = record['description'] ?? '';
            row.appendChild(cell3);

            let cell4 = document.createElement('td');
            cell4.innerHTML = record['category'] ?? '';
            row.appendChild(cell4);

            let cell5 = document.createElement('td');
            cell5.innerHTML = record['keyword'] ?? '';
            row.appendChild(cell5);

            let tBody = this.table.querySelector('tbody');
            if (!tBody) {
                tBody = document.createElement('tbody');
                this.table.appendChild(tBody);

                if (this.options.style.tbody)
                    tBody.style.cssText = this.options.style.tbody;
            }
            tBody.appendChild(row);

            this.setReady();
        };
    
        let files = new motable('table#pages_files');
        files.setReady();
        {% for file in files  %}
        files.append(JSON.parse(`{{ file|json_encode|e('js') }}`));
        {% endfor %}
        
        Fancybox.bind('[file-data-fancybox]', {groupAll: true});
    });
</script>