<script>
    import { getRegiones } from '$/services/regiones'
    export let form = {}
    export let es_nuevo = true

    let regiones = []

    $: begin()

    async function begin() {
        try {
            regiones = await getRegiones()
        } catch (error) {
            globalThis.toast.success(error.detail || error)
        }
    }
</script>

<div class="input-group mb-3">
    <div class="input-group-text">ID</div>
    <input type="number" bind:value={form.id_comuna} class="form-control" disabled>
</div>

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

<div class="input-group mb-3">
    <div class="input-group-text">Región</div>
    <select bind:value={form.id_region} class="form-select" required>
        <option value=""></option>
        {#each regiones as region}
            <option value={region.id_region}>{region.nombre_region}</option>
        {/each}
    </select>
</div>