{% extends 'base.html.twig' %}
{% block title "#{parent()} - #{provider.name}" %}
{% block manifest path('webapp_manifest', { provider: provider.identifier }) %}

{% block body %}
    <div class="row">
        <div class="col-md-8 order-md-last">
            <section class="section messages" v-show="messages.count > 0">
                <header class="section__title flex">
                    <h2>
                        <fa :icon="['fal', 'bullhorn']" fixed-width class="mr-2"></fa>
                        Komunikaty <span class="ml-2 badge badge-pill badge-dark">{{ '{{ messages.count }}' }}</span>
                    </h2>
                    <button class="btn btn-action flex-space-left" ref="settings-messages" v-hover="visibility.messages">
                        <fa :icon="['fal', 'cog']" fixed-width></fa>
                    </button>
                    <button class="btn btn-action" @click="updateMessages" ref="btn-messages-refresh">
                        <fa :icon="['fal', 'sync']" :spin="messages.state === 'fetching'" fixed-width></fa>
                    </button>
                    <button class="btn btn-action" @click="sections.messages = !sections.messages">
                        <fa :icon="['fal', sections.messages ? 'chevron-up' : 'chevron-down']" fixed-width/>
                    </button>

                    <popper reference="settings-messages" :visible="visibility.messages" arrow placement="left-start">
                        <h3 class="popper__heading flex">
                            <fa :icon="['far', 'cog']"></fa>
                            <label class="text" for="messages-auto-refresh">autoodświeżanie</label>
                            <input type="checkbox" class="flex-space-left" id="messages-auto-refresh" v-model="autorefresh.messages.active"/>
                        </h3>
                        <div class="flex" v-show="autorefresh.messages.active">
                            <span class="text">co</span>
                            <label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label>
                            <input type="text" class="form-control form-control-sm" id="messages-auto-refresh-interval" v-model="autorefresh.messages.interval"/>
                            <span class="text">s</span>
                        </div>
                    </popper>
                </header>
                <fold :visible="sections.messages">
                    <messages></messages>
                </fold>
            </section>

            <section class="section">
                <header class="section__title flex">
                    <h2>
                        <fa :icon="['fal', 'clock']" fixed-width></fa>
                        <span class="text">Odjazdy</span>
                    </h2>

                    <button class="btn btn-action flex-space-left" ref="settings-departures" v-hover="visibility.departures">
                        <fa :icon="['fal', 'cog']" fixed-width></fa>
                    </button>
                    <button class="btn btn-action" @click="updateDepartures({ stops })">
                        <fa :icon="['fal', 'sync']" :spin="departures.state === 'fetching'" fixed-width></fa>
                    </button>

                    <popper reference="settings-departures" :visible="visibility.departures" arrow placement="left-start">
                        <h3 class="popper__heading flex">
                            <fa :icon="['far', 'sync']" fixed-width></fa>
                            <label class="text" for="messages-auto-refresh">autoodświeżanie</label>
                            <input type="checkbox" class="flex-space-left" id="messages-auto-refresh" v-model="autorefresh.departures.active"/>
                        </h3>
                        <div class="flex" v-show="autorefresh.messages.active">
                            <span class="text">co</span>
                            <label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label>
                            <input type="text" class="form-control form-control-sm form-control-simple" id="messages-auto-refresh-interval" v-model="autorefresh.departures.interval"/>
                            <span class="text">s</span>
                        </div>
                    </popper>
                </header>
                <departures :stops="stops"></departures>
                {% if provider.attribution %}
                    <div class="attribution">
                        <fa :icon="['fal', 'info-circle']"></fa>
                        Pochodzenie danych: {{ provider.attribution|raw }}
                    </div>
                {% endif %}
            </section>
        </div>
        <div class="col-md-4 order-md-first">
            <section class="section picker" v-if="stops.length > 0">
                <header class="section__title flex">
                    <h2>
                        <fa :icon="['fal', 'sign']" fixed-width></fa>
                        <span class="text">Przystanki</span>
                    </h2>
                    <button class="btn btn-action flex-space-left" @click="clear">
                        <fa :icon="['fal', 'trash-alt']" fixed-width></fa>
                    </button>
                    <button class="btn btn-action" @click="visibility.save = true" @focusout="visibility.save = false" ref="save">
                        <fa :icon="['fal', 'star']" fixed-width></fa>
                    </button>

                    <popper reference="save" :visible="visibility.save" arrow>
                        <h3 class="popper__heading flex">
                            <fa :icon="['far', 'star']" fixed-width></fa>
                            <span class="text">Dodaj do ulubionych</span>
                        </h3>
                        <favourites-adder></favourites-adder>
                    </popper>
                </header>

                <ul class="picker__stops list-underlined">
                    <li v-for="stop in stops" :key="stop.id" class="d-flex align-items-center">
                        <button @click="remove(stop)" class="btn btn-action">
                            <fa :icon="['fal', 'times']"></fa>
                        </button>
                        <stop :stop="stop" class="flex-grow-1"></stop>
                    </li>
                </ul>
            </section>
            <section class="section picker">
                <header class="section__title flex">
                    <template v-if="visibility.picker === 'search'">
                        <h2 class="flex-grow-1">
                            <fa :icon="['fal', 'search']" fixed-width class="mr-1"></fa>
                            Wybierz przystanki
                        </h2>
                        <button class="btn btn-action" @click="visibility.picker = 'favourites'">
                            <fa :icon="['fal', 'star']" fixed-witdth></fa>
                        </button>
                    </template>
                    <template v-else>
                        <h2 class="flex-grow-1">
                            <fa :icon="['fal', 'star']" fixed-width class="mr-1"></fa>
                            Zapisane
                        </h2>
                        <button class="btn btn-action" @click="visibility.picker = 'search'">
                            <fa :icon="['fal', 'search']" fixed-witdth></fa>
                        </button>
                    </template>
                </header>
                <div class="transition-box">
                    <transition name="fade">
                        <keep-alive>
                            <stop-finder @select="add" :blacklist="stops" v-if="visibility.picker === 'search'"></stop-finder>
                            <favourites v-else-if="visibility.picker === 'favourites'"></favourites>
                        </keep-alive>
                    </transition>
                </div>
            </section>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        window.data = {
            provider: {{ provider.identifier|json_encode|raw }}
        };

        window.czydojade = {};
        window.czydojade.state = {{ state|json_encode|raw }};
    </script>
{% endblock %}