{% extends 'abase.axml' %}

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


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

    microserviceSearch: '',
    locationSearch: '',
    whenFilter: '',

    filterResults(){
        let base = `/v1/microservices?pagination=${pagination}`
        if(this.microserviceSearch) base = `${base}&microservice=${this.microserviceSearch}`
        if(this.locationSearch) base = `${base}&location=${this.locationSearch}`
        if(this.whenFilter) base = `${base}&timeline=${this.whenFilter}`
        fetch(`${base}`)
        .then(response => response.json())
        .then(data => {
            isFiltering = true;
            microservices = data;
        }).catch(err => {
            ShowFeedback('error', 'Filter operation failed...')
        })
    },

    clearFilter(){
        this.microserviceSearch = '';
        this.locationSearch = '';
        this.whenFilter = '';
        refreshPage();
    },

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


{% block easel %}
<section x-data="{{ controller('microservices') }}">
    <div><span class="font-800 pr-3">Filters:</span></div>
    <div class="pb-3" x-data="{{ commander() }}" x-effect="checkDirty">
        <span class="display-inline-block">
            <input type="text" placeholder="search by microservice name..." class="w-20em" x-model="microserviceSearch">
            <button disabled>&nbsp;</button>
            <input type="text" class="w-20em" placeholder="with microservice address" x-model="locationSearch">
            <input type="text" placeholder="search disabled..." disabled>
            <select x-model="whenFilter">
                <option>Select Date</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">
            <thead>
                <th style="width: 5%;">ID</th>
                <th>Microservice</th>
                <th>Location</th>
                <th>Pass Key</th>
                <th>Timestamped</th>
            </thead>
            <tbody @refresher.window="refreshPage" x-init="() => { calculateHeight($el, 100); }">
                <template x-for="microservice in microservices">
                    <tr>
                        <td x-text="microservice.id" style="width: 5%"></td>
                        <td x-text="microservice.microservice"></td>
                        <td x-text="microservice.location"></td>
                        <td x-text="microservice.passkey"></td>
                        <td x-text="microservice.timestamped"></td>
                    </tr>
                </template>
            </tbody>
            <tfoot style="position: sticky; bottom: 0">
                <th>ID</th>
                <th>Microservice</th>
                <th>Location</th>
                <th>Pass Key</th>
                <th>Timestamped</th>
            </tfoot>
        </table>
        {{ pagination() }}
    </div>
</section>
{% endblock %}


{% block wizard %}
<span x-data="{
    microservice: '',
    address: '',
    passkey: '',
    resetForm(){
        this.microservice = '';
        this.passkey = '';
        this.address = '';
    },
    saveMicroservice(){
        superpost('/v1/microservices').send({
            microservice: this.microservice,
            address: this.address,
            passkey: this.passkey
        }).then(res => {
            supertoast('info', 'Microservice created');
            this.resetForm();
            $dispatch('refresher');
            showModalContent = false;
        }).catch(err => {
            supertoast('error', err.response.body.error);
        })
    }
}">
    <div class="modal-card-body p-5">
        <div class="brick">
            <label class="font-800 mr-2">Microservice: </label>
            <input type="text" class="w-30em" placeholder="Enter a name for your microservice..." x-model="microservice">
        </div>
        <div class="brick">
            <label class="font-800 mr-2">Address: </label>
            <input type="text" class="w-30em" placeholder="Enter ip/http address for your microservice..." x-model="address">
        </div>
        <div class="brick">
            <label class="font-800 mr-2">Passkey (Secret): </label>
            <textarea class="w-30em" rows="10" x-model="passkey"></textarea>
        </div>
    </div>
    <div class="modal-card-foot">
        <button @click="saveMicroservice">save microservice</button>
    </div>
</span>
{% endblock %}
