<script>
    import PageTitle from "$/components/PageTitle.svelte";
    import CantidadParaderos from "./CantidadParaderos.svelte";
    import CantidadLineas from "./CantidadLineas.svelte";
    import CantidadParaderosComuna from "./CantidadParaderosComuna.svelte";
    import CantidadBusesRecorrido from "./CantidadBusesRecorrido.svelte";
    import CantidadBusesLinea from "./CantidadBusesLinea.svelte";
    import ActualizandoGtfs from "$/components/ActualizandoGtfs.svelte";

    let loading1 = false
    let loading2 = false
    let loading3 = false
    let loading4 = false
    let loading5 = false

    let actualizando = true
</script>

{#if actualizando}
    <ActualizandoGtfs on:close={() => actualizando = false} />
{:else}
    <PageTitle
        loading={loading1 || loading2 || loading3 || loading4 || loading5 }
    ><strong>Análisis</strong> de datos</PageTitle>

    <div class="row">
        <div class="col-xs-12 col-md-7">
            <div class="row">
                <div class="col">
                    <CantidadLineas on:loading={ev => loading1 = ev.detail} />
                </div>
                <div class="col">
                    <CantidadParaderos on:loading={ev => loading2 = ev.detail} />
                </div>
            </div>

            <div class="row">
                <div class="col">
                    <CantidadParaderosComuna on:loading={ev => loading3 = ev.detail} />
                </div>
                <div class="col">
                    <CantidadBusesRecorrido on:loading={ev => loading4 = ev.detail} />
                </div>
            </div>
        </div>

        <div class="col-xs-12 col-md-5">
            <CantidadBusesLinea on:loading={ev => loading5 = ev.detail} />
        </div>
    </div>
{/if}
