{% extends 'base.html' %}
{% block title %}Caretaker{% endblock %}

{% block content %}
<div class="container mt-3">

    <div class="card p-4 shadow-sm">

        <h5 class="mb-3">
            {% if caretaker %}Edit{% else %}Add{% endif %} Caretaker
        </h5>

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

            <!-- ================= NAME ================= -->
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">First Name</label>
                    <input type="text" name="first_name" class="form-control"
                           value="{{ caretaker.first_name|default:'' }}"
                           {% if caretaker %}{% else %}required{% endif %}>
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Last Name</label>
                    <input type="text" name="last_name" class="form-control"
                           value="{{ caretaker.last_name|default:'' }}"
                           {% if caretaker %}{% else %}required{% endif %}>
                </div>
            </div>

            <!-- ================= PHONE ================= -->
            <div class="mb-3">
                <label class="form-label">Phone Number</label>
                <input type="text" name="phone_number" class="form-control"
                       value="{{ caretaker.phone_number|default:'' }}" required>
            </div>

            <!-- ================= ID NUMBER ================= -->
            {% if not caretaker %}
            <div class="mb-3">
                <label class="form-label">ID Number</label>
                <input type="text" name="id_number" class="form-control" required>
                <small class="text-muted">
                    This will be used as the default password.
                </small>
            </div>
            {% endif %}

            <!-- ================= INFO ================= -->
            {% if not caretaker %}
            <div class="alert alert-info small">
                <i class="bi bi-info-circle"></i>
                Caretaker will log in using their ID number as the default password and will be required to change it on first login.
            </div>
            {% endif %}

            <!-- ================= SUBMIT ================= -->
            <button class="btn btn-dark w-100">
                {% if caretaker %}Update Caretaker{% else %}Create Caretaker{% endif %}
            </button>

        </form>

    </div>

</div>
{% endblock %}