<script setup lang="ts"></script>

<template>
  <div style="margin-top: 1.25rem; width: 100%; display: flex; justify-content: center; align-items: center;">
    <div class="card" style="padding: 1.25rem;">
      <div class="field">
        <label class="label">User Name</label>
        <div class="control has-icons-left has-icons-right">
          <input id="ccn-login-form-username" class="input" type="text">
          <span class="icon is-small is-left">
            <font-awesome-icon icon="fas fa-user"></font-awesome-icon>
          </span>
        </div>
      </div>
      <div class="field">
        <label class="label">Password</label>
        <p class="control has-icons-left">
          <input id="ccn-login-form-password" class="input" type="password">
          <span class="icon is-small is-left">
            <font-awesome-icon icon="fas fa-lock"></font-awesome-icon>
          </span>
        </p>
      </div>

      <div class="control">
        <button class="button is-primary">Login</button>
      </div>

    </div>
  </div>
</template>

<style scoped></style>
