<commit_before><!-- { extend: admin/layout_with_menu.php @ content_block } -->

<div id="app">

    <h1>Artikel &amp; News</h1>

    <div class="vx-button-bar">
        <a class="btn with-webfont-icon-right btn-primary" data-icon="&#xe018;" href="<?= \vxPHP\Application\Application::getInstance()->getRouter()->getRoute('article_add')->getUrl() ?>">Artikel anlegen</a>
        <select v-model="filter.cat" class="form-select col-2 mx-2">
            <option value="">(Alle Kategorien)</option>
            <option v-for="cat in categories" :value="cat.id">{{ cat.label }}</option>
        </select>
        <input v-model="filter.title" class="form-input col-2 mx-2" placeholder="Titel filtern...">
    </div>

    <sortable
        :rows="filteredArticles"
        :columns="cols"
        :sort-prop="initSort.column"
        :sort-direction="initSort.dir"
        @after-sort="storeSort"
        ref="sortable"
    >
        <template v-slot:pub="slotProps">
            <label class="form-switch">
                <input type="checkbox" :checked="slotProps.row.pub" @click="publish(slotProps.row)">
                <i class="form-icon"></i>
            </label>
        </template>
        <template v-slot:marked="slotProps">
            <label class="form-checkbox">
                <input type="checkbox" disabled="disabled" :checked="slotProps.row.marked">
                <i class="form-icon"></i>
            </label>
        </template>
        <template v-slot:action="slotProps">
            <a class="btn webfont-icon-only tooltip" data-tooltip="Bearbeiten" :href="'<?= \vxPHP\Application\Application::getInstance()->getRouter()->getRoute('article_edit')->getUrl() ?>?id=' + slotProps.row.key">&#xe002;</a>
            <a class="btn webfont-icon-only tooltip tooltip-left" data-tooltip="Löschen" href="#" @click.prevent="del(slotProps.row)">&#xe011;</a>
        </template>
    </sortable>

</div>

<script type="module">
    import Sortable from  "/js/vue/components/sortable.js";
    import SimpleFetch from  "/js/vue/util/simple-fetch.js";

    let app = new Vue({
<commit_msg>Articles list works with UMD<commit_after><!-- { extend: admin/layout_with_menu.php @ content_block } -->

<div id="app">

    <h1>Artikel &amp; News</h1>

    <div class="vx-button-bar">
        <a class="btn with-webfont-icon-right btn-primary" data-icon="&#xe018;" href="<?= \vxPHP\Application\Application::getInstance()->getRouter()->getRoute('article_add')->getUrl() ?>">Artikel anlegen</a>
        <select v-model="filter.cat" class="form-select col-2 mx-2">
            <option value="">(Alle Kategorien)</option>
            <option v-for="cat in categories" :value="cat.id">{{ cat.label }}</option>
        </select>
        <input v-model="filter.title" class="form-input col-2 mx-2" placeholder="Titel filtern...">
    </div>

    <sortable
        :rows="filteredArticles"
        :columns="cols"
        :sort-prop="initSort.column"
        :sort-direction="initSort.dir"
        @after-sort="storeSort"
        ref="sortable"
    >
        <template v-slot:pub="slotProps">
            <label class="form-switch">
                <input type="checkbox" :checked="slotProps.row.pub" @click="publish(slotProps.row)">
                <i class="form-icon"></i>
            </label>
        </template>
        <template v-slot:marked="slotProps">
            <label class="form-checkbox">
                <input type="checkbox" disabled="disabled" :checked="slotProps.row.marked">
                <i class="form-icon"></i>
            </label>
        </template>
        <template v-slot:action="slotProps">
            <a class="btn webfont-icon-only tooltip" data-tooltip="Bearbeiten" :href="'<?= \vxPHP\Application\Application::getInstance()->getRouter()->getRoute('article_edit')->getUrl() ?>?id=' + slotProps.row.key">&#xe002;</a>
            <a class="btn webfont-icon-only tooltip tooltip-left" data-tooltip="Löschen" href="#" @click.prevent="del(slotProps.row)">&#xe011;</a>
        </template>
    </sortable>

</div>

<script src="/js/vue/vxweb.umd.min.js"></script>
<script>
    const Sortable = window.vxweb.default.Sortable;
    const SimpleFetch = window.vxweb.default.SimpleFetch;

    let app = new Vue({

{'fraction_non_alphanumeric': 0.18698224852071005, 'fraction_numerical': 0.007100591715976331, 'mean_word_length': 2.834845735027223, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 99, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1335512', 'n_tokens_mistral': 1365, 'n_tokens_neox': 1321, 'n_words': 225}