{% extends 'layout.html' %}

{% set title = 'Add Contact | Agenda' %}
{% set css = 'contact-form.css' %}

{% block content %}
    <section class="add-contact-container">
        <div class="contact-form-container">
            <h2 class="form-heading">Add new Contact</h2>

            <form action="{{ url_for('add_contact')}}" method="POST">
                <div class="form-group">
                    <label class="form-label" for="text">Name *</label>
                    <input class="form-input" type="name" name="name" id="name" placeholder="Enter a name">
                </div>

                <div class="form-group">
                    <label class="form-label" for="text">Last name</label>
                    <input class="form-input" type="name" name="lastname" id="lastname" placeholder="Enter a lastname">
                </div>

                <div class="form-group">
                    <label class="form-label" for="text">Phone *</label>
                    <input class="form-input" type="tel" name="phone" id="phone" placeholder="Enter a phone">
                </div>

                <div class="form-group">
                    <label class="form-label" for="text">Other phone</label>
                    <input class="form-input" type="tel" name="other_phone" id="other_phone" placeholder="Enter other phone">
                </div>

                <div class="form-group">
                    <label class="form-label" for="text">Address</label>
                    <input class="form-input" type="text" name="address" id="address" placeholder="Enter an address">
                </div>

                <div class="form-group">
                    <label class="form-label" for="email">Email</label>
                    <input class="form-input" type="email" name="email" id="email" placeholder="Enter an email">
                </div>

                <div class="form-group">
                    <label class="form-label" for="category">Category *</label>
                    <select class="form-select" name="category" id="category">
                        <option value="" disabled selected>Select an option</option>
                        <option value="Family">Family</option>
                        <option value="Friend">Friend</option>
                        <option value="Acquaintance">Acquaintance</option>
                        <option value="None">None</option>
                    </select>
                </div>

                <div class="form-group">
                    <input class="form-checkbox" type="checkbox" name="favorite" id="favorite" value="1">
                    <label class="form-label" for="favorite">Favorite</label>
                </div>

                <div class="form-group">
                    <button class="btn-submit" type="submit">Create contact</button>
                </div>

                <div class="alert-container">
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert {{ category }}">{{ message }}</div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                </div>
           </form>
        </div>
    </section>
{% endblock %}