{% include 'header.html' %}
{% load static %}

<div class="mdk-header-layout__content">
<div class="mdk-drawer-layout js-mdk-drawer-layout" data-push data-responsive-width="992px">

<div class="mdk-drawer-layout__content page">

<div class="container page__heading-container">
<div class="row mb-3">

<div class="col-6">

{% if user_obj %}
<h1 class="heading">Edit User</h1>
{% else %}
<h1 class="heading">Add User</h1>
{% endif %}

<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="{% url 'user_profile_list' %}">Users</a></li>

{% if user_obj %}
<li class="breadcrumb-item active">Edit User</li>
{% else %}
<li class="breadcrumb-item active">Add User</li>
{% endif %}

</ol>
</nav>

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


<div class="container page__container exam-module">
<div class="card card-body">

<form method="POST">
{% csrf_token %}

{% if user_obj %}
<input type="hidden" name="user_id" value="{{user_obj.id}}">
{% endif %}

<div class="row g-2">

<div class="col-md-6 pb-2">
<label>First Name</label>
<input type="text" name="first_name" class="form-control"
value="{{user_obj.first_name|default:''}}" required>
</div>

<div class="col-md-6 pb-2">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control"
value="{{user_obj.last_name|default:''}}">
</div>

<div class="col-md-6 pb-2">
<label>Email</label>
<input type="email" name="email" class="form-control"
value="{{user_obj.email|default:''}}" required>
</div>

<div class="col-md-6 pb-2">
<label>{% if user_obj %}New Password{% else %}Password{% endif %}</label>
<input type="password" name="password" class="form-control"
autocomplete="new-password" {% if not user_obj %}required{% endif %}>
{% if user_obj %}
<small class="form-text text-muted">Leave blank to keep the current password.</small>
{% endif %}
</div>

<div class="col-md-6 pb-2">
<label>Contact Number</label>
<input type="text" name="contact" class="form-control"
value="{{profile.contact_number|default:''}}">
</div>

<div class="col-md-6 pb-2">
<label>Date of Birth</label>
<input type="date" name="dob" class="form-control"
value="{{profile.date_of_birth|date:'Y-m-d'}}">
</div>

<div class="col-md-6 pb-2">
<label>User Role</label>

<select name="role" class="form-control">
<option value="">Select Role</option>

{% for r in roles %}

<option value="{{r.id}}"
{% if profile.role_id == r.id %} selected {% endif %}>
{{r.role_name}}
</option>

{% endfor %}

</select>

</div>
<div class="col-md-6 pb-2">
<label>Status</label>

<select name="status" class="form-control">

<option value="Active"
{% if profile.status == "Active" %}selected{% endif %}>
Active
</option>

<option value="Inactive"
{% if profile.status == "Inactive" %}selected{% endif %}>
Inactive
</option>

</select>

</div>

</div>

<br>

<div class="text-center">

{% if user_obj %}
<button type="submit" class="btn btn-primary">
Update User
</button>
{% else %}
<button type="submit" class="btn btn-primary">
Create User
</button>
{% endif %}

<a href="{% url 'user_profile_list' %}" class="btn btn-outline-secondary ms-3">
Cancel
</a>

</div>

</form>

</div>
</div>

</div>

{% include 'sidebar.html' %}

</div>
</div>

{% include 'footer.html' %}