<!doctype html>
<html lang="en">
    <head>
        <title>{{ repository }}</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        {% include "utils/style.jinja2" %}
        {% include "user-style.jinja2" ignore missing %}

        {% if rss_url is not none %}
            <link rel="alternate" href="{{ rss_url }}" type="application/rss+xml">
        {% endif %}
    </head>

    <body>

        {% include "utils/bootstrap-scripts.jinja2" %}

        <div class="container">
            <h1>Arch linux user repository</h1>
        </div>

        <div class="container">
            {% if pgp_key is not none %}
                <p>This repository is signed with <a href="https://keyserver.ubuntu.com/pks/lookup?search=0x{{ pgp_key }}&fingerprint=on&op=index" title="key search">{{ pgp_key }}</a> by default.</p>
            {% endif %}

            <p>In order to use this repository edit your <code>/etc/pacman.conf</code> as following:</p>

            <pre class="language-ini"><code id="pacman-conf" class="language-ini">[{{ repository }}]
Server = {{ link_path }}
SigLevel = Database{% if has_repo_signed %}Required{% else %}Never{% endif %} Package{% if has_package_signed %}Required{% else %}Never{% endif %} TrustedOnly</code><button id="copy-btn" type="button" class="btn language-ini" onclick="copyPacmanConf()"><i class="bi bi-clipboard"></i> copy</button></pre>
        </div>

        <div class="container">
            <table id="packages"
                   data-classes="table table-hover"
                   data-export-options='{"fileName": "packages"}'
                   data-filter-control="true"
                   data-filter-control-visible="false"
                   data-page-list="[10, 25, 50, 100, all]"
                   data-page-size="10"
                   data-pagination="true"
                   data-resizable="true"
                   data-search="true"
                   data-show-columns="true"
                   data-show-columns-search="true"
                   data-show-columns-toggle-all="true"
                   data-show-export="true"
                   data-show-filter-control-switch="true"
                   data-show-fullscreen="true"
                   data-show-search-clear-button="true"
                   data-sortable="true"
                   data-sort-name="base"
                   data-sort-order="asc">
                <thead class="table-primary">
                    <tr>
                        <th data-sortable="true" data-switchable="false" data-field="name" data-filter-control="input" data-filter-control-placeholder="(any package)">package</th>
                        <th data-sortable="true" data-align="right" data-field="version" data-filter-control="input" data-filter-control-placeholder="(any version)">version</th>
                        <th data-sortable="true" data-visible="false" data-field="architecture" data-filter-control="select" data-filter-control-placeholder="(any arch)">architecture</th>
                        <th data-sortable="true" data-visible="false" data-field="description" data-filter-control="input" data-filter-control-placeholder="(any description)">description</th>
                        <th data-sortable="true" data-visible="false" data-field="url">upstream url</th>
                        <th data-sortable="true" data-visible="false" data-field="licenses" data-filter-control="select" data-filter-data="func:filterListLicenses" data-filter-custom-search="filterList" data-filter-control-placeholder="(any license)">licenses</th>
                        <th data-sortable="true" data-visible="false" data-field="groups" data-filter-control="select" data-filter-data="func:filterListGroups" data-filter-custom-search="filterList" data-filter-control-placeholder="(any group)">groups</th>
                        <th data-sortable="true" data-visible="false" data-field="depends" data-filter-control="select" data-filter-data="func:filterListDepends" data-filter-custom-search="filterList" data-filter-control-placeholder="(any depends)">depends</th>
                        <th data-sortable="true" data-align="right" data-field="archive_size">archive size</th>
                        <th data-sortable="true" data-align="right" data-field="installed_size">installed size</th>
                        <th data-sortable="true" data-align="right" data-field="timestamp" data-filter-control="input" data-filter-custom-search="filterDateRange" data-filter-control-placeholder="(any date)">build date</th>
                    </tr>
                </thead>

                <tbody>
                {% for package in packages %}
                    <tr>
                        <td><a href="{{ link_path }}/{{ package.filename }}" title="{{ package.name }}">{{ package.name }}</a></td>
                        <td>{{ package.version }}</td>
                        <td>{{ package.architecture }}</td>
                        <td>{{ package.description }}</td>
                        <td><a href="{{ package.url }}" title="{{ package.name }} upstream url">{{ package.url }}</a></td>
                        <td>{{ package.licenses | join("<br>" | safe) }}</td>
                        <td>{{ package.groups | join("<br>" | safe) }}</td>
                        <td>{{ package.depends | join("<br>" | safe) }}</td>
                        <td>{{ package.archive_size }}</td>
                        <td>{{ package.installed_size }}</td>
                        <td>{{ package.build_date }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="container">
            <footer class="d-flex flex-wrap justify-content-between align-items-center border-top">
                <ul class="nav">
                    {% if homepage is not none %}
                        <li><a class="nav-link" href="{{ homepage }}" title="homepage"><i class="bi bi-house"></i> homepage</a></li>
                    {% endif %}
                </ul>
                <ul class="nav">
                    <li><a class="nav-link" href="https://github.com/arcan1s/ahriman" title="sources"><i class="bi bi-github"></i> ahriman</a></li>
                </ul>
            </footer>
        </div>

        <script>
            const table = $(document.getElementById("packages"));

            const pacmanConf = document.getElementById("pacman-conf");
            const pacmanConfCopyButton = document.getElementById("copy-btn");

            async function copyPacmanConf() {
                const conf = pacmanConf.textContent;
                await copyToClipboard(conf, pacmanConfCopyButton);
            }

            function filterListDepends() {
                return extractDataList(table.bootstrapTable("getData"), "depends");
            }

            function filterListGroups() {
                return extractDataList(table.bootstrapTable("getData"), "groups");
            }

            function filterListLicenses() {
                return extractDataList(table.bootstrapTable("getData"), "licenses");
            }

            ready(_ => {
                table.bootstrapTable({
                    onCreatedControls: _ => {
                        new easepick.create({
                            element: document.querySelector(".bootstrap-table-filter-control-timestamp"),
                            css: [
                                "https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css",
                            ],
                            grid: 2,
                            calendars: 2,
                            autoApply: false,
                            locale: {
                                cancel: "Clear",
                            },
                            RangePlugin: {
                                tooltip: false,
                            },
                            plugins: [
                                "RangePlugin",
                            ],
                            setup: picker => {
                                picker.on("select", _ => { table.bootstrapTable("triggerSearch"); });
                                // replace "Cancel" behaviour to "Clear"
                                picker.onClickCancelButton = element => {
                                    if (picker.isCancelButton(element)) {
                                        picker.clear();
                                        picker.hide();
                                        table.bootstrapTable("triggerSearch");
                                    }
                                };
                            },
                        });
                    },
                });
            });
        </script>

    </body>

</html>
