<script>
    export let form = {};
    let codigo_dividido = "";

    $: codigo_dividido = form.route_short_name
        ? form.route_short_name.match(/\d+|[a-z]+/gi)
        : ["", ""];
</script>

<div class="row">
    <div class="col-md">
        <div class="input-group mb-3">
            <div class="input-group-text">ID</div>
            <input
                type="text"
                class="form-control"
                value={form.id_linea}
                disabled
            />
        </div>

        <div class="input-group mb-3">
            <div class="input-group-text">Operador</div>
            <input
                type="text"
                class="form-control"
                bind:value={form.id_operador}
            />
        </div>

        <div class="input-group mb-3">
            <div class="input-group-text">Código LUR</div>
            <input
                type="text"
                class="form-control"
                bind:value={form.route_short_name}
            />
        </div>

        <div class="input-group mb-3">
            <div class="input-group-text">Dirección</div>
            <input
                type="text"
                class="form-control"
                bind:value={form.route_long_name}
            />
        </div>

        <div class="input-group mb-3">
            <div class="input-group-text">Color Fondo 1</div>
            <input type="text" class="form-control" bind:value={form.bgcolor1} required>
            <div class="form-control">
                <input
                    type="color"
                    class="w-100"
                    bind:value={form.bgcolor1}
                />
            </div>
        </div>

        <div class="input-group mb-3">
            <div class="input-group-text">Color Texto 1</div>
            <input type="text" class="form-control" bind:value={form.color1} required>
            <div class="form-control">
                <input
                    type="color"
                    class="w-100"
                    bind:value={form.color1}
                />
            </div>
        </div>

        <div class="input-group mb-3">
            <div class="input-group-text">Color Fondo 2</div>
            <input type="text" class="form-control" bind:value={form.bgcolor2} required>
            <div class="form-control">
                <input
                    type="color"
                    class="w-100"
                    bind:value={form.bgcolor2}
                />
            </div>
        </div>
        
        <div class="input-group mb-3">
            <div class="input-group-text">Color Texto 2</div>
            <input type="text" class="form-control" bind:value={form.color2} required>
            <div class="form-control">
                <input
                    type="color"
                    class="w-100"
                    bind:value={form.color2}
                />
            </div>
        </div>

    </div>
    <div class="col-md">
        <table
            class="m-auto border border-secondary"
            cellpadding="10"
            cellspacing="0"
            style="--bgcolor1: {form.bgcolor1}; --color1: {form.color1}; --bgcolor2: {form.bgcolor2}; --color2: {form.color2}"
        >
            <tbody class="color1">
                <tr>
                    <td rowspan="4" width="80" class="color2 text-center">
                        <h1 class="m-0">{codigo_dividido[0]}</h1>
                        <h1 class="m-0">{codigo_dividido[1]}</h1>
                    </td>
                    <td
                        ><input
                            type="text"
                            class="form-control"
                            placeholder="Linea 1"
                            bind:value={form.linea1}
                            required
                        /></td
                    >
                </tr>
                <tr>
                    <td
                        ><input
                            type="text"
                            class="form-control"
                            placeholder="Linea 2"
                            bind:value={form.linea2}
                            required
                        /></td
                    >
                </tr>
                <tr>
                    <td
                        ><input
                            type="text"
                            class="form-control"
                            placeholder="Linea 3"
                            bind:value={form.linea3}
                            required
                        /></td
                    >
                </tr>
                <tr class="color2">
                    <td
                        ><input
                            type="text"
                            class="form-control"
                            placeholder="Linea 4"
                            bind:value={form.linea4}
                            required
                        /></td
                    >
                </tr>
            </tbody>
        </table>
    </div>
</div>

<style>
    .color1 {
        background-color: var(--bgcolor1);
        color: var(--color1);
    }
    .color2 {
        background-color: var(--bgcolor2);
        color: var(--color2);
    }
</style>
