{% extends 'base.html' %}
{% load static %}
{% block content %}
{% include 'profile/header.html' %}
{% include 'profile/drawer.html' %}

<br />
<br />
<br/>
<div class="container mt-4">
    <div class="text-center mb-5">
        <h2 class="display-4 text-gradient" style="font-weight: bold;">
            <i class="fas fa-users text-primary me-2"></i> لیست فرزندان
        </h2>
        <div class="gradient-divider"></div>
    </div>

    {% include 'profile/message.html' %}
    <br/>
    
        <div class="row gy-4 animate__animated animate__delay-0.1s animate__fadeIn " >
            {% for family in families %}
                {% for child in family.child.all %}
                    <div class="col-lg-4 col-md-6 ">
                        <div class="card shadow border-0 position-relative hover-zoom">
                            <div class="card-body text-center">
                                <h5 class="fw-bold text-primary">{{ child.user.first_name }} {{ child.user.last_name }}</h5>
                                <p class="text-muted small">عضو خانواده</p>
                                <a href="{% url 'view' child.id %}" class="btn btn-outline-primary rounded-pill">
                                    مشاهده اطلاعات
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% empty %}
                <div class="col-12">
                    <div class="alert alert-warning text-center" role="alert">
                        هیچ فرزندی یافت نشد.
                    </div>
                </div>
            {% endfor %}
        </div>
    
</div>


<style>

.text-gradient {
    background: linear-gradient(to right, #17a2b8, #007bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gradient Divider */
.gradient-divider {
    height: 4px;
    width: 150px;
    margin: 10px auto;
    background: linear-gradient(to right, #17a2b8, #007bff);
    border-radius: 2px;
}

/* Card Styles */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 15px;
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Hover Zoom Effect */
.hover-zoom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(23, 162, 184, 0.2), rgba(0, 123, 255, 0.2));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 15px;
}
.hover-zoom:hover::before {
    opacity: 1;
}

/* Button Styles */
.btn-outline-primary {
    border: 2px solid #007bff;
    color: #007bff;
    transition: background 0.3s, color 0.3s;
}
.btn-outline-primary:hover {
    background: #007bff;
    color: #fff;
}
</style>

{% endblock %}