<script>
    import { getRoles } from "$/services/roles";

    export let form = {}
    export let es_nuevo = true
    export let clave2 = ''
    let roles = []

    getRoles().then(data => roles = data).catch(error => alert(error))
</script>

<div class="row">
    <div class="col-md mb-3">
        Login
        <input type="text" bind:value={form.login} class="form-control" required disabled={!es_nuevo}>
    </div>
    <div class="col-md mb-3">
        Rol
        <select required bind:value={form.id_rol} class="form-select">
            {#each roles as rol}
            <option value={rol.id_rol}>{rol.nombre_rol}</option>
            {/each}
        </select>
    </div>
    <div class="col-md mb-3 pt-3">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" bind:checked={form.superuser} id="usuario-superuser">
            <label class="form-check-label" for="usuario-superuser">Super usuario</label>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" bind:checked={form.vigente} id="usuario-vigente">
            <label class="form-check-label" for="usuario-vigente">Vigente</label>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md mb-3">
        Contraseña
        <input type="password" bind:value={form.clave} class="form-control" required={es_nuevo || !!clave2}>
    </div>
    <div class="col-md mb-3">
        Repita Contraseña
        <input type="password" bind:value={clave2} class="form-control" required={es_nuevo || !!form.clave}>
    </div>
</div>