<script>
    import PageTitle from "../../components/PageTitle.svelte";
    import { getLetreroLUR } from "../../services/letreros_lur";
    import { getLinea } from "../../services/lineas";
    import ModalFormRuta from "./ModalFormRuta.svelte";
    import TableRutas from "./TableRutas.svelte";
    let loading = false

    let ruta = null

    async function onEdita({ linea: { id_linea } }) {
        try {
            loading = true
            const linea = await getLinea(id_linea)
            const letrero = await getLetreroLUR(linea.route_short_name).catch(() => Promise.resolve({}))
            ruta = { ...linea, ...letrero }
        } catch (error) {
            console.log({ error })
        } finally {
            loading = false
        }
    }
</script>


<PageTitle {loading}>Rutas de Buses</PageTitle>

<TableRutas on:loading={ev => loading = ev.detail} on:select={ev => onEdita(ev.detail)} />

{#if ruta}
    <ModalFormRuta {ruta} on:close={() => ruta = null} />
{/if}