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

{% block content %}

<style>
    .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);
        color: lightslategrey !important;
        border-bottom: 2px solid rgb(112, 159, 191);
    }
    .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;
    }
    fieldset legend,
    .section-bordered legend {
        color: #495057 !important;
        font-weight: 400;
    }
</style>

<div class="container mt-4">
    <div class="row">
        <div class="col-lg-10 mx-auto">

            {# --- Messages --- #}
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}

            {# --- Registration Form Card --- #}
            <div class="card shadow-sm">
                <div class="card-header" style="background-color: #e9ebee;">
                    <h4 class="my-0">
                        🐟 Register Your CARES Species:
                        <i>{{ cares_species.name }}</i>{% if cares_species.common_name %} &nbsp;<small class="text-muted">({{ cares_species.common_name }})</small>{% endif %}
                    </h4>
                </div>
                <div class="card-body px-4 py-3" style="background-color: rgb(189, 219, 241);">
                    <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% crispy form %}
                    </form>
                </div>
            </div>

            {# --- Current Aquarist Species Verification Photo --- #}

            {% if species_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 <i>Aquarist Species</i> Verification Photo</h4>
                </div>
                <div class="card-body text-center" style="background-color: rgb(189, 219, 241);">
                    <img src="{{ species_instance.aquarist_species_image.url }}"
                         alt="{{ species_instance.name }}"
                         class="img-fluid"
                         style="max-height: 300px;">
                    <p class="mt-2 text-muted">
                        <small>
                            This is your current &nbsp;<b>Aquarist Species</b>&nbsp; photo. <br> 
                            <i>To be used as a CARES Species Verification Photo it must be a photo showing your fish.</i>
                        </small>
                    </p>
                </div>
            </div>
            {% endif %}

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

{% endblock %}