<%~ include("partials/base_head.eta", {"title": "Dashboard"}) %>
<%~ include("partials/nav.eta") %>

<section class="section buttons container" id="mainSelect">

</section>
<hidden>
	<!-- Base Button -->
	<button class="button is-link is-large m-2" id="baseStruct">Username</button>
</hidden>
<div class="modal" id="pinPadModal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Bitte PIN eingeben</p>
      <div class="notification is-danger is-hidden" id="pinError">
	<button class="delete"></button>
		Ein fehlerhafter PIN wurde eingegeben.
	</div>
    </header>
    <section class="modal-card-body">
    <!--
      <input class="input" type="password" placeholder="1234" id="pinInput" maxlength="4" />
      -->

      <!-- Use 4 fields for the pin, similar to a 2FA fields -->
      <div class="field has-addons is-centered">
		<div class="control">
			<input class="input is-large has-text-centered" type="password" placeholder="1" id="pinInput1" maxlength="1" />
		</div>
		<div class="control">
			<input class="input is-large has-text-centered" type="password" placeholder="2" id="pinInput2" maxlength="1" />
		</div>
		<div class="control">
			<input class="input is-large has-text-centered" type="password" placeholder="3" id="pinInput3" maxlength="1" />
		</div>
		<div class="control">
			<input class="input is-large has-text-centered" type="password" placeholder="4" id="pinInput4" maxlength="1" />
		</div>
	</div>

      <section class="section buttons container is-centered are-centered" id="numpad">
	<!-- Num pad with 3 keys per row -->
	<div class="columns is-grouped">
		<div class="column">
			<button class="button is-link is-large m-2">1</button>
		</div>
		<div class="column">
			<button class="button is-link is-large m-2">2</button>
		</div>
		<div class="column">
			<button class="button is-link is-large m-2">3</button>
		</div>
	</div>
	<div class="columns is-grouped">
		<div class="column">
			<button class="button is-link is-large m-2">4</button>
		</div>
		<div class="column">
			<button class="button is-link is-large m-2">5</button>
		</div>
		<div class="column">
			<button class="button is-link is-large m-2">6</button>
		</div>
	</div>
	<div class="columns is-grouped">
		<div class="column">
			<button class="button is-link is-large m-2">7</button>
		</div>
		<div class="column">
			<button class="button is-link is-large m-2">8</button>
		</div>
		<div class="column">
			<button class="button is-link is-large m-2">9</button>
		</div>
	</div>
	<div class="columns is-grouped">
		<div class="column">
			<button class="button is-link is-large m-2">0</button>
		</div>
		<div class="column">
			<button class="button is-warning is-large m-2"><i class="bi bi-backspace-fill"></i></button>
		</div>
		<div class="column">
			<button class="button is-success is-large m-2"><i class="bi bi-check"></i></button>
		</div>
	</div>

</section>
    </section>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<%~ include("partials/footer.eta") %>
<script src="/static/pages/user_select.js"></script>
<%~ include("partials/base_foot.eta") %>