<%- include('partials/header_dashboard') %>

<%- include('partials/dashboard_navigation') %>

<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Profile data</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
      <div class="btn-group me-2">
        <a href="/dashboard" class="btn btn-sm btn-outline-secondary"><span data-feather="home" class="align-text-bottom"></span>
          Dashboard</a>
      </div>
    </div>
  </div>


<div class="container border-bottom">
  <form action="/settings" method="post">
    <!-- 2 column grid layout with text inputs for the first and last names -->
    <div class="row mb-4">
      <div class="col">
        <div class="form-outline">
          <input name="firstName" type="text" id="firstNameId" class="form-control" <% if(profileData.firstName) { %>value="<%= profileData.firstName %>"<% } %> required />
          <label class="form-label" for="firstNameId">First name</label>
        </div>
      </div>
      <div class="col">
        <div class="form-outline">
          <input name="lastName" type="text" id="lastNameId" class="form-control" <% if(profileData.lastName) { %>value="<%= profileData.lastName %>"<% } %> required />
          <label class="form-label" for="lastNameId">Last name</label>
        </div>
      </div>
    </div>

    <!-- Text input -->
    <div class="form-outline mb-4">
      <input name="position" type="text" id="positionId" class="form-control" <% if(profileData.position) { %>value="<%= profileData.position %>"<% } %> required />
      <label class="form-label" for="positionId">Position</label>
    </div>

    <!-- Text input -->
    <div class="form-outline mb-4">
      <input name="department" type="text" id="departmentId" class="form-control" <% if(profileData.department) { %>value="<%= profileData.department %>"<% } %> required />
      <label class="form-label" for="departmentId">Department</label>
    </div>

    <!-- Email input -->
    <div class="form-outline mb-4">
      <input name="email" type="email" id="emailId" class="form-control" <% if(profileData.username) { %>value="<%= profileData.username %>"<% } %> required readonly />
      <label class="form-label" for="emailId">Email</label>
    </div>

    <!-- Number input -->
    <div class="form-outline mb-4">
      <input name="phone" type="number" id="phoneId" class="form-control" <% if(profileData.phone) { %>value="<%= profileData.phone %>"<% } %> required />
      <label class="form-label" for="phoneId">Phone</label>
    </div>


    <!-- Submit button -->
    <input name="id" type="hidden" class="form-control" value="<%= profileData._id %>" />
    <button type="submit" class="btn btn-primary btn-block mb-4">Update & Continue</button>
  </form>
</div>

</main>

<!-- Footer -->

<%- include('partials/footer_dashboard') %>
