{% 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">
                <h2 class="section__title flex">
                    <fa :icon="['fal', 'bullhorn']" fixed-width class="mr-2"></fa>
                    Komunikaty <span class="ml-2 badge badge-pill badge-dark">{{ '{{ messages.count }}' }}</span>
                    <button class="btn btn-action flex-space-left" @click="updateMessages">
                        <fa :icon="['fal', 'sync']" :spin="messages.state === 'fetching'"></fa>
                    </button>
                    <button class="btn btn-action" @click="sections.messages = !sections.messages">
                        <fa :icon="['fal', sections.messages ? 'chevron-up' : 'chevron-down']" fixed-width/>
                    </button>
                </h2>
                <fold :visible="sections.messages">
                    <messages></messages>
                </fold>
            </section>

            <section class="section">
                <h2 class="section__title flex">
                    <fa :icon="['fal', 'clock']" fixed-width class="mr-1"></fa>
                    Odjazdy
                    <button class="btn btn-action flex-space-left" @click="updateDepartures({ stops })">
                        <fa :icon="['fal', 'sync']" :spin="departures.state === 'fetching'"></fa>
                    </button>
                </h2>
                <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">
                <h2 class="section__title">
                    <fa :icon="['fal', 'sign']" fixed-width></fa>
                    Przystanki
                </h2>
                <stop-picker :stops.sync="stops"></stop-picker>
            </section>
        </div>
    </div>
{% endblock %}

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