{% extends 'base_app.html' %}

{% block content %}

<h3 class="mb-4">👤 Health Profile</h3>

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

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

        <div class="row">

            <!-- Age -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Age</label>
                <input type="number" name="age" class="form-control"
                       value="{{ profile.age|default:'' }}" required>
            </div>

            <!-- Gender -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Gender</label>

                <select name="gender" class="form-control" required>
                    <option value="">Select Gender</option>

                    <option value="Male"
                        {% if profile and profile.gender == "Male" %}selected{% endif %}>
                        Male
                    </option>

                    <option value="Female"
                        {% if profile and profile.gender == "Female" %}selected{% endif %}>
                        Female
                    </option>

                    <option value="Other"
                        {% if profile and profile.gender == "Other" %}selected{% endif %}>
                        Other
                    </option>

                </select>
            </div>

            <!-- Weight -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Weight (kg)</label>
                <input type="number" name="weight" class="form-control"
                       value="{{ profile.weight|default:'' }}" required>
            </div>

            <!-- Height -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Height (cm)</label>
                <input type="number" name="height" class="form-control"
                       value="{{ profile.height|default:'' }}" required>
            </div>


            <!-- Conditions -->
            <div class="col-md-6 mb-3">
                <label class="form-label">Existing Conditions</label>
                <input type="text" name="existing_conditions" class="form-control"
                       placeholder="Diabetes, BP, etc."
                       value="{{ profile.existing_conditions|default:'' }}">
            </div>
            

            <div class="col-md-6 mb-3">
                <label class="form-label">Baseline Systolic BP</label>
                <input type="number" name="baseline_systolic_bp" class="form-control"
                    value="{{ profile.baseline_systolic_bp|default:'' }}" required>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">Baseline Diastolic BP</label>
                <input type="number" name="baseline_diastolic_bp" class="form-control"
                    value="{{ profile.baseline_diastolic_bp|default:'' }}" required>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label">Baseline Heart Rate</label>
                <input type="number" name="baseline_heart_rate" class="form-control"
                    value="{{ profile.baseline_heart_rate|default:'' }}" required>
            </div>
        </div>

        <!-- Button -->
        <button type="submit" class="btn btn-danger mt-3">
            {% if profile %}
                Update Profile
            {% else %}
                Save Profile
            {% endif %}
        </button>

    </form>

</div>

{% endblock %}