{% extends 'abase.axml' %}

{% from 'actions.axml' import pagination %}

{% macro commander() %}
{
    isFilterable: false,
    oldPagination: pagination,

    idSearch: '',
    eventSearch: '',
    microserviceSearch: '',
    endpointSearch: '',
    descriptionSearch: '',
    whenFilter: '',

    filterResults(){
        let base = `/v1/subscribers?pagination=${100}&page=${page}`
        if(this.idSearch) base = `${base}&id=${this.idSearch}`
        if(this.eventSearch) base = `${base}&event=${this.eventSearch}`
        if(this.microserviceSearch) base = `${base}&microservice=${this.microserviceSearch}`
        if(this.endpointSearch) base = `${base}&endpoint=${this.endpointSearch}`
        if(this.descriptionSearch) base = `${base}&description=${this.descriptionSearch}`
        if(this.whenFilter) base = `${base}&timeline=${this.whenFilter}`
        fetch(`${base}`)
        .then(response => response.json())
        .then(data => {
            isFiltering = true;
            subscribers = data;
        }).catch(err => {
            ShowFeedback('error', 'Filter operation failed...')
        })
    },

    clearFilter(){
        this.idSearch = '';
        this.eventSearch = '';
        this.microserviceSearch = '';
        this.endpointSearch = '';
        this.descriptionSearch = '';
        this.whenFilter = '';
        isFiltering = false;
        fetchAll();
    },

    checkDirty(){
        if(this.idSearch !== '' ||
            this.eventSearch !== '' ||
            this.microserviceSearch !== '' ||
            this.endpointSearch !== '' || this.descriptionSearch !== '' || this.whenFilter !== '') {
            this.isFilterable = true;
            return true;
        }
        this.isFilterable = false;
        return false;
    }
}
{% endmacro %}


{% block easel %}
<section x-data="{{ controller('subscribers') }}">
    <div><span class="font-800">Filters:</span></div>
    <div class="pb-3" x-data="{{ commander() }}" x-effect="checkDirty">
        <span class="display-inline-block">
            <input type="text" placeholder="s. id" x-model="idSearch"  style="width: 5em"/>
            <input type="text" placeholder="microservice name..." style="width: 13em" x-model="microserviceSearch">
            <input type="text" placeholder="event name..." style="width: 15em" x-model="eventSearch">
            <input style="width: 14em" type="text" placeholder="subscriber endpoint..." x-model="endpointSearch">
            <input type="text" placeholder="subscriber description..." style="width: 18em" x-model="descriptionSearch">
            <select x-model="whenFilter">
                <option>Select Day</option>
                <template x-for="[val, txt] in Object.entries({today: 'Today', week: 'This Week', month: 'This Month'})" :key="val">
                    <option :value="val" x-text="txt"></option>
                </template>
            </select>
            <button @click="filterResults" :disabled="! isFilterable">
                <ion-icon name="search" class="font-size-xs"></ion-icon>
                search
            </button>
            <button disabled>&nbsp;</button>
            <button @click.self="clearFilter" :disabled="! isFiltering">
                clear filter
                <ion-icon name="leaf-outline" class="font-size-xs"></ion-icon>
            </button>
        </span>
    </div>

    <div class="easel" x-init="calculateHeight($el, 10); fetchAll()">
        <table class="table is-striped is-fullwidth is-hoverable paginated">
            <thead>
                <th style="width: 5%">SID</th>
                <th>Microservice</th>
                <th>Event</th>
                <th>Endpoint</th>
                <th>Description</th>
                <th>Timestamped</th>
            </thead>
            <tbody x-init="() => { calculateHeight($el, 100); }">
                <template x-for="subscriber in subscribers">
                    <tr>
                        <td x-text="subscriber.subscriber" style="width: 5%;"></td>
                        <td x-text="subscriber.microservice"></td>
                        <td x-text="subscriber.event"></td>
                        <td>
                            <code x-text="subscriber.endpoint" class="font-size-sm"></code>
                        </td>
                        <td x-text="truncate(subscriber.description, 40)"></td>
                        <td x-text="subscriber.timestamped"></td>
                    </tr>
                </template>
            </tbody>
            <tfoot style="position: sticky; bottom: 0">
                <th>Subscriber</th>
                <th>Microservice</th>
                <th>Event</th>
                <th>Endpoint</th>
                <th>Description</th>
                <th>Timestamped</th>
            </tfoot>
        </table>
        {{ pagination() }}
    </div>
</section>
{% endblock %}
