{% extends 'main.html' %}
{% load static %}
{% block content %}

<!-- Aquarist Tile View -->
<!-- context = {'aquarist': aquarist, 'speciesKept': speciesKept} -->

<div class="container mt-4">
    <div class="row">
        <div class="col-lg-12 mx-auto">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0">
                        <i class="bi bi-house-door-fill me-2"></i>
                        {{aquarist.get_display_name}}'s Fishroom
                    </h3>
                </div>
                <div class="card-body px-4 py-3">
                    {% if request.user.is_authenticated %}
                        <!-- Split first line left|right with Name on left and Social Media (if it exists) on right -->
                        <div class="mb-2 d-flex justify-content-between align-items-center flex-wrap gap-3">
                            <div>
                                {% if not aquarist.is_private_name %}
                                    <strong>Name:</strong>&nbsp;&nbsp; {{aquarist.get_full_name}} 
                                {% else %}
                                    <strong>Name:</strong>&nbsp;&nbsp; <i>Private</i>
                                {% endif %}
                            </div>
                            {% if aquarist.instagram_url or aquarist.facebook_url or aquarist.youtube_url %}
                                <div class="d-flex align-items-center gap-2">
                                    Social Media:
                                    <div class="d-flex gap-2">
                                        {% if aquarist.instagram_url %}
                                            <a href="{{ aquarist.instagram_url }}" target="_blank" rel="noopener noreferrer" 
                                            class="social-icon" title="Instagram">
                                                <i class="bi bi-instagram" style="font-size: 2.0rem; color: #E4405F;"></i>
                                            </a>
                                        {% endif %}
                                        {% if aquarist.facebook_url %}
                                            <a href="{{ aquarist.facebook_url }}" target="_blank" rel="noopener noreferrer" 
                                            class="social-icon" title="Facebook">
                                                <i class="bi bi-facebook" style="font-size: 2.0rem; color: #1877F2;"></i>
                                            </a>
                                        {% endif %}
                                        {% if aquarist.youtube_url %}
                                            <a href="{{ aquarist.youtube_url }}" target="_blank" rel="noopener noreferrer" 
                                            class="social-icon" title="YouTube">
                                                <i class="bi bi-youtube" style="font-size: 2.0rem; color: #FF0000;"></i>
                                            </a>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-2">
                            {% if not aquarist.is_private_location %}
                                {% if aquarist.state or aquarist.country %}
                                    <div class="mb-2">
                                        <strong>Location:</strong> &nbsp;&nbsp;{{aquarist.state}}{% if aquarist.state and aquarist.country %}, {% endif %}{{aquarist.country}}
                                    </div> 
                                {% endif %} 
                            {% endif %}

                            {% if affiliate_clubs.all.count > 0  %}
                                <div class="mb-2">
                                    {% if registration.affiliate_club %}
                                        <strong>Club Affiliation:</strong>&nbsp;&nbsp;
                                        <a href="{% url 'aquaristClub' registration.affiliate_club.id %}" class="text-decoration-none">
                                            {{registration.affiliate_club.acronym}}
                                        </a>
                                        <span class="text-muted">({{registration.affiliate_club.name}})</span>
                                    {% endif %}                        
                                </div>
                            {% endif %}                            
                            
                            <div class="mt-3 d-flex justify-content-between align-items-start">
                                <a class="btn btn-secondary" href="{% url 'emailAquarist' aquarist.id %}" role="button">
                                    <i class="bi bi-envelope me-2"></i>Email {{aquarist.get_display_name}}
                                </a>
                                {% if userCanEdit and speciesKept.all.count > 0 %}
                                    <a class="btn btn-secondary" href="{% url 'chooseSpeciesInstancesForLabels' aquarist.id %}" role="button">
                                        <i class="bi bi-tags me-2"></i>&nbsp;Create Labels&nbsp;
                                    </a>
                                {% endif %}
                            </div>
                        <small>&nbsp;</small>
                    {% endif %}

                    <!-- Currently Kept Species Section with Bordered Container -->
                    <div class="section-bordered mb-4 p-4">

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="mb-0">
                                <i class="bi bi-fish me-2"></i>Currently Keeping
                            </h4>
                            <div class="d-flex align-items-center gap-3">
                                <span class="text-muted"><large>{{ speciesKept.all.count }} species</large></span>
                                <!-- View Toggle -->
                                <div class="btn-group btn-group-sm" role="group" aria-label="View toggle">
                                    <a href="?view=tile" 
                                    class="btn {% if current_view == 'tile' %}btn-primary{% else %}btn-outline-primary{% endif %}"
                                    {% if current_view == 'tile' %}style="background-color: rgb(190, 220, 241) !important; border-color: rgb(60, 60, 200) !important;"{% endif %}
                                    title="Tile View">
                                        <i class="bi bi-grid-3x3-gap"></i> Tiles
                                    </a>
                                    <a href="?view=list" 
                                    class="btn {% if current_view == 'list' %}btn-primary{% else %}btn-outline-primary{% endif %}"
                                    {% if current_view == 'list' %}style="background-color: rgb(190, 220, 241) !important; border-color: rgb(60, 60, 200) !important;"{% endif %}
                                    title="List View">
                                        <i class="bi bi-list-ul"></i> List
                                    </a>
                                </div>
                            </div>
                        </div>

                        {% if speciesKept.all.count > 0 %}
                            <div class="row g-4">
                                {% for speciesInstance in speciesKept %}
                                    <div class="col-lg-3 col-md-4 col-sm-6">
                                        <a href="{% url 'speciesInstance' speciesInstance.id %}" class="text-decoration-none">
                                            <div class="card h-100 shadow-sm species-card species-tile">
                                                <!-- Image Section -->
                                                <div class="card-img-top-wrapper position-relative" style="height: 180px; overflow: hidden; background-color: #f8f9fa; border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;">
                                                    {% if speciesInstance.aquarist_species_image %}
                                                        <img src="{{ speciesInstance.aquarist_species_image.url }}" 
                                                             class="card-img-top h-100 w-100" 
                                                             style="object-fit: cover;"
                                                             alt="{{ speciesInstance.species.name }}">
                                                    {% else %}
                                                        <img src={% static "images\asn_placeholder_not_found2.png" %}
                                                             class="card-img-top h-100 w-100" 
                                                             style="object-fit: cover;"
                                                             alt="{{ speciesInstance.species.name }}">
                                                    {% endif %}
                                                    
                                                    <!-- CARES Badge -->
                                                    {% if speciesInstance.species.render_cares %}
                                                        <span class="position-absolute top-0 end-0 m-2 badge badge-cares">
                                                            CARES
                                                        </span>
                                                    {% endif %}
                                                </div>
                                                
                                                <!-- Card Body -->
                                                <div class="card-body">
                                                    <h6 class="card-title mb-2">
                                                        <em>{{ speciesInstance.species.name }}</em>
                                                    </h6>
                                                    <div class="mb-2 small text-muted d-flex justify-content-between align-items-center">
                                                        <span>
                                                            <!--i class="bi bi-geo-alt"></i-->
                                                            {% if speciesInstance.collection_point %}
                                                                {{ speciesInstance.collection_point }}
                                                            {% else %}
                                                                &nbsp;
                                                            {% endif %}
                                                        </span>
                                                        
                                                        <span>
                                                            {% if speciesInstance.genetic_traits == speciesInstance.GeneticLine.WILD_CAUGHT %}
                                                                WC
                                                            {% elif speciesInstance.genetic_traits == speciesInstance.GeneticLine.F1 %}
                                                                F1
                                                            {% elif speciesInstance.genetic_traits == speciesInstance.GeneticLine.F2 %}
                                                                F2
                                                            {% endif %}
                                                        </span>
                                                    </div>                                               
                                                    
                                                    <!-- Status Badges with Text -->
                                                    <div class="mt-3 d-flex flex-wrap gap-1">
                                                        {% if speciesInstance.have_spawned %}
                                                            <span class="badge badge-breeding">
                                                                &nbsp;Breeding&nbsp;
                                                            </span>
                                                        {% endif %}
                                                        {% if speciesInstance.young_available %}
                                                            <span class="badge badge-young-available">
                                                                &nbsp;Available&nbsp;
                                                            </span>
                                                        {% endif %}
                                                        {% if speciesInstance.enable_species_log %}
                                                            <span class="badge badge-species-log">
                                                                Species Log
                                                            </span>
                                                        {% endif %}                                                        
                                                    </div>                                                     
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle me-2"></i>
                                No species currently being kept.
                            </div>
                        {% endif %}
                    </div>

                    <!-- Previously Kept Species Section with Bordered Container -->
                    {% if speciesPreviouslyKept.all.count > 0 %}
                        <div class="section-bordered mt-5 p-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h4 class="mb-0">
                                    <i class="bi bi-clock-history me-2"></i>Previously Kept 
                                </h4>
                                <span class="text-muted"><large>{{ speciesPreviouslyKept.all.count }} species&nbsp;&nbsp;</large></span>
                            </div>
                            <div class="row g-4">
                                {% for speciesInstance in speciesPreviouslyKept %}
                                    <div class="col-lg-3 col-md-4 col-sm-6">
                                        <a href="{% url 'speciesInstance' speciesInstance.id %}" class="text-decoration-none">
                                            <div class="card h-100 shadow-sm species-card opacity-50">
                                                <!-- Lower card opacity = more grayed out effect | Higher image grayscale = more grayed out effect -->
                                                <div class="card-img-top-wrapper position-relative" style="height: 180px; overflow: hidden; background-color: #f8f9fa; border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;">
                                                    {% if speciesInstance.aquarist_species_image %}
                                                        <img src="{{ speciesInstance.aquarist_species_image.url }}" 
                                                                class="card-img-top h-100 w-100" 
                                                                style="object-fit: cover; filter: grayscale(60%);"
                                                                alt="{{ speciesInstance.species.name }}">
                                                    {% else %}
                                                        <img src={% static "images\asn_placeholder_not_found2.png" %}
                                                            class="card-img-top h-100 w-100" 
                                                            style="object-fit: cover;"
                                                            alt="{{ speciesInstance.species.name }}">
                                                    {% endif %}
                                                    
                                                    <!-- "Previously Kept" Overlay Badge -->
                                                    <span class="position-absolute top-0 start-0 m-2 badge bg-secondary">
                                                        Previously Kept
                                                    </span>
                                                    
                                                    <!-- CARES Badge -->
                                                    {% if speciesInstance.species.render_cares %}
                                                        <span class="position-absolute top-0 end-0 m-2 badge badge-cares">
                                                            CARES
                                                        </span>
                                                    {% endif %}
                                                </div>
                                                
                                                <!-- Card Body -->
                                                <div class="card-body">
                                                    <h6 class="card-title mb-2 text-muted">
                                                        <em>{{ speciesInstance.species.name }}</em>
                                                    </h6>
                                                    {% if speciesInstance.collection_point %}
                                                        <p class="mb-2 small text-muted">
                                                            <i class="bi bi-geo-alt"></i>
                                                            {{ speciesInstance.collection_point }}
                                                        </p>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>    
    </div>                
</div>

<style>
    .species-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    
    .card-img-top-wrapper img {
        transition: transform 0.3s;
    }
    
    .species-card:hover img {
        transform: scale(1.05);
    }

    /* Breeding badge - soft green */
    .badge-breeding {
        background-color: #88c9a1;              /* Muted sage green */
        color: #1e4d2b;                         /* Dark green text */
    }

    /* Fry badge - soft teal/blue */
    .badge-raised-fry {
        background-color: #7ec8d9;              /* Soft teal */
        color: #1e4d5c;                         /* Dark teal text */
    }

    /* Available badge - soft amber */
    .badge-young-available {
        background-color: #f0c674;              /* Soft amber/gold */
        color: #5c4a1e;                         /* Dark brown text */
    }

    /* Available badge - soft amber */
    .badge-species-log {
        background-color: rgb(160, 200, 230);   /* Light bluish gray 170, 210, 240 */
        color: darkslategray;                   /* Dark gray */
    }

    /* CARES badge - softer red */
    .badge-cares {
        background-color: rgb(185, 76, 76);     /* Muted red */
        color: white;                           /* Light text */
    }
</style>
{% endblock content %}