{% extends "main.html" %}
{% load crispy_forms_tags %}

{% block content %}

<style>
    /* Card background - 25% lighter than ASN Blue */
    .species-instance-card .card {
        background-color: rgb(189, 219, 241);
        border: 2px solid rgb(132, 179, 211);
    }
    
    .species-instance-card .card-body {
        background-color: rgb(189, 219, 241);
    }

    .species-instance-card .card-header {
        background-color: rgb(132, 179, 211); /* !important */
        color:lightslategrey !important;
        border-bottom: 2px solid rgb(112, 159, 191);
    }
    
    /* Bordered sections (e.g. Media) */
    .section-bordered {
        background-color: rgb(212, 231, 247);
        border: 2px solid rgb(162, 189, 221);
        border-radius: 0.5rem;
        padding: 0.5rem 1.5rem;
        margin-bottom: 1rem;
    }
    
    .section-bordered legend {
        background-color: rgb(212, 231, 247) !important;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        border: none !important;
        width: auto;
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    /* General Info section (no border) */
    .general-info-section {
        background-color: transparent;
        padding: 0;
    }

    /* All fieldset legends */
    fieldset legend,
    .section-bordered legend {
        color: #495057 !important;  /* Match General Info gray */
        font-weight: 400;
    }

    /* Override label/field widths for Media section only */
    .media-fields-custom .col-md-2 {
        flex: 0 0 25%;  /* Make label wider (was ~17%) */
        max-width: 25%;
    }

    .media-fields-custom .col-md-10 {
        flex: 0 0 75%;  /* Make field narrower (was ~83%) */
        max-width: 75%;
    }    
        
</style>

<div class="container mt-4">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <div class="card shadow-sm">
                <div class="card-header" style="background-color: #e9ebee";">
                    <h4 class="my-0">
                        {% if form.instance.pk %}
                            Edit Aquarist Species: <i>{{ form.instance.name }}</i>
                        {% else %}
                            Add Aquarist Species
                        {% endif %}
                    </h4>
                </div>
                <div class="card-body px-4 py-3" style="background-color: rgb(189, 219, 241);">
                    {% crispy form %}
                </div>
            </div>

            <!-- Preview current image -->
            {% if form.instance.aquarist_species_image %}
            <div><p>&nbsp;</p></div>
            <div class="card mt-3 species-form-card">
                <div class="card-header" style="background-color: #e9ebee">                   
                    <h4 class="my-0">Current Image</h4>
                </div>
                <div class="card-body text-center" style="background-color: rgb(189, 219, 241);">
                    <img src="{{ form.instance.aquarist_species_image.url }}" 
                        alt="{{ form.instance.name }}" 
                        class="img-fluid" 
                        style="max-height: 300px;">
                </div>
            </div>
            {% endif %}

            <!-- Delete button (only show when editing existing object) -->
            {% if form.instance.pk %}
                <div><p>&nbsp;</p></div>
                <div class="card mt-3 species-form-card">
                    <div class="card-header" style="background-color: #e9ebee">                   
                        <h4 class="my-0">Delete Aquarist Species</h4>
                    </div>
                    <div class="card-body px-4 py-3" style="background-color: rgb(189, 219, 241);">
                        <p>This action cannot be undone. All associated data will be permanently removed.</p>
                        <a href="{% url 'deleteSpeciesInstance' form.instance.pk %}" 
                            class="btn btn-secondary"
                            style="color: darkred !important;">
                            Delete Aquarist Species
                        </a>
                    </div>
                </div>

                {% if request.user.is_admin %} 
                    <div><p>&nbsp;</p></div>
                    <div class="card mt-3 species-form-card">
                        <div class="card-header" style="background-color: #e9ebee">                   
                            <h4 class="my-0">Reassign Species</h4>
                        </div>
                        <div class="card-body px-4 py-3" style="background-color: rgb(189, 219, 241);">
                            <p>This is an <b>advanced option</b> to correct the Species assignment selected by the Aquarist Species user.</p>
                            <p>Use with caution! You must know the Species ID you wish to assign.</p>
                            <a href="{% url 'reassignSpeciesInstance' form.instance.pk %}" 
                                class="btn btn-secondary"
                                style="color: darkred !important;">
                                Reassign Species
                            </a>
                        </div>
                    </div>
                {% endif %}

                {% if not speciesMaintenanceLog %} 
                    <div><p>&nbsp;</p></div>
                    <div class="card mt-3 species-form-card">
                        <div class="card-header" style="background-color: #e9ebee">                   
                            <h4 class="my-0">Species Maintenance Group</h4>
                        </div>
                        <div class="card-body px-4 py-3" style="background-color: rgb(189, 219, 241);">
                            <p>
                                <b><i>Species Maintenance Groups</i></b> enable Aquarists to collaborate. You can create a
                                <b>Species Maintenance Log</b> and invite other Aquarists to share ownership of the log. 
                                By combining efforts you gain tank space and a larger gene pool to better maintain the species.
                                Together you can add notes, photos, and YouTube videos documenting your maintenance journey.
                            </p>
                            <a href="{% url 'createSpeciesMaintenanceLog' form.instance.pk %}" class="btn btn-secondary">Add Species Maintenance Log</a>
                        </div>
                    </div>
                {% endif %}
            {% endif %}

        </div>
    </div>
</div>

{% endblock %}