<script>
    window.app_<?= $unique ?> = <?= json_encode($appSettings); ?>;
    window.posts_<?= $unique ?> = <?= json_encode($posts); ?>;
    <?php if($settings['view'] === 'full_list'){ ?>
    window.terms_<?= $unique ?> = <?= json_encode($terms); ?>;
    <?php } ?>
</script>

<?= $schema ?>

<div class="webien-reactive-list-app" id="list-<?= $unique ?>" data-unique="<?= $unique ?>">

    <?php if ($settings['view'] === 'full_list') { ?>
        <?php if ($settings['show_filters'] === 'yes' || $settings['use_search'] === 'yes') { ?>
            <div class="top">
                <?php if ($settings['use_search'] === 'yes') { ?>
                    <input class="search" v-model="postsSearchTerm" type="text"
                           placeholder="<?= __('Sök..', 'webien') ?>">
                <?php } ?>

                <?php if ($settings['show_filters'] === 'yes') { ?>
                    <div class="filters">
                        <button class="filter" type="button" @click="activeTerm = null">
                            <span><?= __('Alla', 'webien') ?></span>
                        </button>
                        <button v-for="item in terms" class="filter" type="button"
                                :class="{active:activeTerm === item.id}"
                                @click="activeTerm = item.id">
                            <span v-html="item.name"></span>
                        </button>
                    </div>
                <?php } ?>
            </div>
        <?php } ?>
    <?php } ?>

    <div class="<?= $settings['view'] ?> <?= $settings['posttype'] ?>"
         :class="{ready:appReady}">

        <div class="main">
            <ul class="list-items <?= $settings['contain_content'] === 'yes' ? 'contain-content' : '' ?>"
                :class="['level', 'level-' + ((arr[0] && typeof arr[0].groupLevel !== 'undefined') ? arr[0].groupLevel : 0)]"
                v-for="(arr, key) in postsFiltered" :key="key" v-show="arr.length">
                <?php if ($isGroupedView) { ?>
                    <h3 v-if="key !== appSettings.hidden_group_heading" class="a-z" :id="headingId(key)" v-html="key"></h3>
                <?php } ?>
                <div class="group">
                    <listitem
                            v-for="item in arr"
                            :key="item.id"
                            :item="item"
                            @itemclick="listItemClicked(item)"
                    ></listitem>
                </div>
            </ul>

            <div class="no-match" v-if="noMatches">
                <h3><?= __('Hittade inga resultat..', 'webien') ?></h3>
            </div>
        </div>

    </div>

</div>

<?php
// In preview mode, force load of js for better preview experience
if (\Elementor\Plugin::$instance->editor->is_edit_mode()) {
    echo '<script src="' . WEBIEN_PLUGIN_URL . 'dist/reactive-list.js"></script>';
}
