<!DOCTYPE html>
<html lang="es">
    <%- include('../partials/head'); %>
    <body>
        <div class="container">
            <%- include('../partials/header'); %>
            <div class="row bg-grey">
                <div class="col-md p-5">
                    <h1 class="font-brand text-center mb-4">Añadir mascota</h1>
                    <form action="/pets/addPet" method="POST">
                        <div class="d-md-flex justify-content-between">
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control" name="name" placeholder="Nombre" autofocus required minlength="2">
                                <label for="name">Nombre</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="date" class="form-control" name="birthday" placeholder="Fecha de nacimiento" required>
                                <label for="birthday">Fecha de nacimiento</label>
                            </div>
                        </div>
                        <div class="d-md-flex justify-content-between">
                            <div class="form-floating mb-3">
                                <select class="form-select" name="specie">
                                    <!-- 'dog', 'cat', 'bird', 'rodent', 'fish', 'other' -->
                                    <option selected>Seleccionar </option>
                                    <option value="dog">Perro</option>
                                    <option value="cat">Gato</option>
                                    <option value="bird">Ave</option>
                                    <option value="rodent">Roedor</option>
                                    <option value="fish">Pez</option>
                                    <option value="other">Otro</option>
                                </select>
                                <label for="specie">Tipo de mascota</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control" name="breed" placeholder="Raza" required>
                                <label for="breed">Raza</label>
                            </div>
                        </div>
                        <div class="d-md-flex justify-content-between">
                            <div class="form-floating mb-3">
                                <select class="form-select" name="size">
                                    <!-- 'small', 'medium', 'large' -->
                                    <option selected>Seleccionar </option>
                                    <option value="small">Pequeño</option>
                                    <option value="medium">Mediano</option>
                                    <option value="large">Grande</option>
                                </select>
                                <label for="size">Tamaño</label>
                            </div>
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control" name="color" placeholder="Color" required>
                                <label for="color">Color</label>
                            </div>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" name="chip" placeholder="Nº de Chip" required>
                            <label for="chip">Nº de Chip</label>
                        </div>
                        <div class="form-floating mb-3">
                            <textarea class="form-control" name="medical_info" placeholder="Datos médicos"></textarea>
                            <label for="medical_info">Datos médicos</label>
                        </div>
                        <% if (user.role == "admin" || user.role == "staff") { %>
                            <div class="form-floating mb-3">
                                <input type="text" class="form-control" name="caregiver" placeholder="Nombre de usuario del cliente" required>
                                <label for="caregiver">Cliente titular</label>
                            </div>
                        <% } %>
                        <div class="form-floating mb-3">
                            <textarea class="form-control" name="comments" placeholder="Comentarios"></textarea>
                            <label for="comments">Comentarios</label>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="friendly">
                            <label class="form-check-label" for="friendly">¿Sociable?</label>
                        </div>
                        <div class="text-center">
                            <a href="/home" class="btn btn-secondary">
                                <i class="bi bi-x-lg"></i> 
                                Cancelar
                            </a>
                            <button type="submit" class="btn btn-success bg-blue text-light"><i class="bi bi-check-lg"></i> Añadir</button>
                        </div>
                    </form>
                </div>
                <div class="col-md p-0">
                    <img src="/images/perros y gatos.jpg" alt="Perro y gato" class="cover">
                </div>
            </div>
            <%- include('../partials/footer'); %>
        </div>
    </body>
</html>