{% extends 'abase.axml' %}
{% from 'actions.axml' import pagination %}
{% set modal_name = 'Applications' %}

{% macro commander() %}
{
    isFilterable: false,
    nameSearch: '',
    addressSearch: '',
    whenFilter: '',
    filterResults(){
        let base = `/v1/applications?pagination=${pagination}`
        if(this.nameSearch) base = `${base}&name=${this.nameSearch}`
        if(this.addressSearch) base = `${base}&address=${this.addressSearch}`
        if(this.whenFilter) base = `${base}&timeline=${this.whenFilter}`
        fetch(`${base}`)
            .then(response => response.json())
            .then(data => {
                isFiltering = true;
                applications = data;
            }).catch(err => {
                ShowFeedback('error', 'Filter operation failed...')
            })
        },
        clearFilter(){
            this.nameSearch = ''; this.addressSearch = '';
            this.whenFilter = '';
            refreshPage();
        },
        checkDirty(){
            if(this.nameSearch !== '' || this.addressSearch !== '' || this.whenFilter !== '') {
                this.isFilterable = true;
                return true;
            }
            this.isFilterable = false;
            return false;
        }
    }
{% endmacro %}

{% block easel %}
<section x-data="{{ controller('applications') }}">
    <div class="px-3">
        <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 application name..."
                    class="w-20em"
                    x-model="nameSearch"
                />
                <button disabled>&nbsp;</button>
                <input
                    type="text"
                    class="w-20em"
                    placeholder="with application address"
                    x-model="addressSearch"
                />
                <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>

    <div class="easel" x-init="calculateHeight($el, 10)">
        <table class="table is-striped is-fullwidth is-hoverable">
            <thead>
                <th>Name</th>
                <th>Address</th>
                <th>Pass phrase</th>
                <th>Timestamped</th>
            </thead>
            <tbody
                @refresher.window="refreshPage"
                x-init="() => { calculateHeight($el, 100); }"
            >
                <template x-for="application in applications">
                    <tr>
                        <td x-text="application.application"></td>
                        <td x-text="application.address"></td>
                        <td x-text="application.secret"></td>
                        <td x-text="application.timestamped"></td>
                    </tr>
                </template>
            </tbody>
            <tfoot style="position: sticky; bottom: 0">
                <th>Name</th>
                <th>Address</th>
                <th>Pass phrase</th>
                <th>Timestamped</th>
            </tfoot>
        </table>
        {{ pagination() }}
    </div>
</section>
{% endblock %}

{% block wizard %}
<span
    x-data="{
    application: '',
    port: '',
    scheme: 'http',
    address: '',
    secret: '',
    resetForm(){
        this.name = '';
        this.secret = '';
        this.address = '';
    },
    get Address(){
        let suffix = '';
        if(this.port.length) suffix = `:${this.port}`
        return `${this.scheme}://${this.address}${suffix}`;
    },
    saveApplication(){
        superpost('/v1/applications').send({
            application: this.application,
            address: this.Address,
            secret: this.secret
        }).then(res => {
            supertoast('info', 'Application 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">Name: </label>
            <input
                type="text"
                class="w-30em input"
                placeholder="Enter a name for your application..."
                x-model="application"
            />
        </div>
        <div class="brick bricks">
            <label class="font-800 mr-2">Address: </label>
            <div>
                <div class="select">
                    <select x-model="scheme">
                        <option value="http">HTTP</option>
                        <option value="https">HTTPS</option>
                    </select>
                </div>
                <input
                    type="text"
                    class="w-30em input"
                    placeholder="Enter ip/http address for your application..."
                    x-model="address"
                />
                <input
                    type="text"
                    class="input width-5em"
                    placeholder="Port"
                    x-model="port"
                />
            </div>
        </div>
        <div class="brick">
            <label class="font-800 mr-2">Pass phrase: </label>
            <textarea
                class="mw-40em text"
                rows="10"
                x-model="secret"
            ></textarea>
        </div>
    </div>
    <div class="modal-card-foot">
        <button class="button primary" @click="saveApplication">
            save application
        </button>
    </div>
</span>
{% endblock %}
