<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxBootstrap5Navigation:{},dmxAnimateCSS:{},dmxStateManagement:{},dmxDatastore:{},dmxBootstrap5Modal:{}}" -->
<dmx-json-datasource id="stateJSON" is="dmx-serverconnect" url="/states.json"></dmx-json-datasource>
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <form id="form1">
                        <div class="form-group mb-3 row">
                            <label for="input1" class="col-sm-2 col-form-label">Full Name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="input1" name="input1" aria-describedby="input1_help">
                                <small id="input1_help" class="form-text text-muted">*Enter your full name</small>
                            </div>
                        </div>
                        <div class="form-group mb-3 row">
                            <label for="input2" class="col-sm-2 col-form-label">License no.</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="input2" name="input2" aria-describedby="input1_help">
                                <small id="input1_help1" class="form-text text-muted">*Enter your driver license number</small>
                            </div>
                        </div>
                        <div class="form-group mb-3 row">
                            <label for="input3" class="col-sm-2 col-form-label">License State</label>
                            <div class="col">
                                <div class="form-group mb-3">
                                    <label for="input3" class="form-label">Select</label>
                                    <select id="input3" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" optionvalue="abbreviation">
                                        <option value="1">Option One</option>
                                        <option value="2">Option Two</option>
                                        <option value="3">Option Three</option>
                                    </select>
                                    <small id="select1Help" class="form-text text-muted">Pick the state your License is issued from</small>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <p>Use this for a count or modal footer</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" dmx-on:click="datastore1.insert()">Save changes</button>
            </div>
        </div>
    </div>
</div>
<dmx-datastore id="datastore1"></dmx-datastore>
<div class="container">
    <h1 class="text-center">Lets Begin.&nbsp;What is your Role?</h1>
</div>
<div class="container">
    <div class="row">
        <div class="text-center col-4 offset-1" id="cLeft">
            <button id="btn1" class="btn text-center lh-lg btn-success" dmx-on:click="modal1.show()">Delivery Associate</button>
        </div>
        <div class="text-center offset-2 col-3" id="cRight">
            <button id="btn2" class="btn lh-lg btn-warning">Driver Trainers</button>
        </div>
    </div>
</div>

<meta name="ac:route" content="/">