<script lang="ts">
    let selectedOption = $state(false);
    
    let {onClose, onSubmit}: {onClose:()=>void, onSubmit:(op:boolean)=>void} = $props();

    const handleSubmit = (e:Event) => {
        e.preventDefault();
        onSubmit(selectedOption);
    };
</script>
  
  
<div 
    class="modal show d-block" 
    tabindex="-1" 
    role="dialog" 
    aria-labelledby="exampleModalLabel" 
    aria-hidden="true"
>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Selecciona una opción</h5>
                <button type="button" class="btn-close" aria-label="Close" onclick={onClose}></button>
            </div>
            <div class="modal-body">
                <form onsubmit={handleSubmit}>
                    <div class="form-group mb-3">
                        <label for="formatSelect">Formato</label>
                        <select 
                            id="formatSelect" 
                            class="form-select" 
                            bind:value={selectedOption}
                        >
                            <option value="false">PDF</option>
                            <option value="true">HTML</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary" onclick={handleSubmit}>Aceptar</button>
                </form>
            </div>
        </div>
    </div>
</div>