{% extends 'main.html' %}
{% load static %}
<!-- context = {species, speciesReferenceLinks, speciesInstances, renderCares, userCanEdit, cform, rlform, userCanEdit} -->
{% block content %}

<div class="container mt-4"></div>
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h3>CARES Species Profile: &nbsp;<i>{{species.name}}</i></h3>
                </div>
                <!--div class="card-body px-4 py-3" style="background-color: #b6d7ef;"-->
                <div class="card-body px-4 py-3">
                    {% if species.alt_name %}
                        <p><b>Synonym:</b> &nbsp;&nbsp;{{species.alt_name}}</p>
                    {% endif %}
                    {% if species.common_name %}
                        <p><b>Common Name:</b>&nbsp;&nbsp;{{species.common_name}}</p>
                    {% endif %}
                    {% if species.species_image %}
                        <p><img src={{species.species_image.url}}></p>
                    {% endif %}
                    {% if species.photo_credit %}
                        <p>Photo by:<i> &nbsp;{{species.photo_credit}}</i> </p>
                    {% endif %}
                    <h4>Description</h4>
                        <p>{{species.description|linebreaks}}</p>

                    <p><b>CARES Family:</b> &nbsp;&nbsp;{{species.get_cares_family_display}}</p>     
                    <p><b>Global Region:</b> &nbsp;&nbsp;{{species.get_global_region_display}}</p>
                    <p><b>Distribution:</b> &nbsp;&nbsp;{{species.local_distribution}}</p>
                    <!--small>&nbsp;</small-->

                    {% if species.render_cares %}
                        <!--div class="mb-3 section-bordered"-->
                            <!--h4>Conservation Status</h4-->
                            <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.0rem;">                             
                                <span><b>CARES Classification:</b>&nbsp;&nbsp;{{species.get_cares_classification_display}}</span>
                                <span><b>CARES Assessment Date:</b>&nbsp;&nbsp;{{species.cares_assessment_date}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            </div>              
                            {% if species.iucn_red_list != Species.IucnRedList.UNDEFINED and species.iucn_red_list != Species.IucnRedList.NOT_EVALUATED %}   
                                <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem;">                             
                                    <span><b>IUCN Red List:</b>&nbsp;&nbsp;{{species.get_iucn_red_list_display}}&nbsp;&nbsp;</span>
                                    <span><b>IUCN Assessment Date:</b>&nbsp;&nbsp;{{species.iucn_assessment_date}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </div>  
                            {% endif %}      
                        <!--/div-->
                        <small>&nbsp;</small>
                    {% endif %}            

                    <div class="css_class='mb-3 section-bordered">
                        <h4>CARES Registration</h4>
                        <p class="text-muted mb-3">
                            Click the <i>Register This Species</i> button if you keep this species and have not yet registered it with CARES.<br>
                            You will need to provide information about where you acquired your fish and a photo to verify the species. 
                        </p>
                        <p><a class="btn btn-secondary" href="{% url 'registerCaresSpecies' species.id  %}" role="button">&nbsp;<b>Register This Species</b>&nbsp;</a></p>
                    </div>   

                    {% if speciesReferenceLinks.all.count > 0  %}
                        <div class="css_class='mb-3 section-bordered">
                            <h4>Reference Links</h4>
                                {% for speciesReferenceLink in speciesReferenceLinks %}
                                    <p style = "display: flex; justify-content: space-between;">
                                        <span><a href="{{speciesReferenceLink.reference_url}}" target="_blank" rel="noopener noreferrer">{{speciesReferenceLink.name}}</a></span>
                                        {% if speciesComment.user == request.user or userCanEdit %}
                                            <a href="{% url 'editSpeciesReferenceLink' speciesReferenceLink.id %}">Edit Link</a>
                                            <!--a class="btn btn-secondary" href="{% url 'editSpeciesReferenceLink' speciesReferenceLink.id  %}" role="button">&nbsp;Edit Link&nbsp;</a-->
                                        {% endif %}  
                                    </p>  
                                {% endfor %}  
                        </div>
                    {% endif %}

                    {% if species.external_id %}
                        <div class="css_class='mb-3 section-bordered">
                            <h4><i>AquaristSpecies.net</i> Community</h4>
                            <p class="text-muted mb-3">
                                Aquarists keeping and breeding <i>{{species.name}}</i> are encouraged to share their experiences and availability of offspring 
                                they raise with fellow hobbyists. If you haven't already, please consider creating an AquaristSpecies.net account and clicking 
                                <i>'I keep this species'</i> on the matching species page.
                            </p>
                            <p>
                            {% if species.species_instance_count %}
                                {% if species.species_instance_count == 1 %}
                                    <b>Currently there is 1 registered aquarist keeping this species.</b> 
                                {% else %}    
                                    <b>There are currently {{species.species_instance_count}} community members keeping this species.</b> 
                                {% endif %}    
                            {% endif %}
                            <p>
                                <a href="https://aquaristspecies.net/species/{{species.external_id}}/" target="_blank" rel="noopener noreferrer">
                                AquaristSpecies.net - {{species.name}}</a>
                            </p>
                        </div>                        
                    {% endif %}

                    <div class="css_class='mb-3 section-bordered">
                        <h4>Species Feedback</h4>
                        <p class="text-muted mb-3">
                            Please use the Species Feedback button to provide helpful comments or corrections. <i>Only admins will see your submission.</i>
                        </p>
                        <p class="text-muted mb-3">
                            <b>Note: </b>If you have a good photo you would like to submit for consideration as the Species Profile photo you can upload it.
                        </p>
                        <p><a class="btn btn-secondary" href="{% url 'submitSpeciesFeedback' species.id %}" role="button">&nbsp;<b>Submit Species Feedback</b>&nbsp;</a></p>
                    </div>                          

                    {% if userCanEdit %}
                        <!--div class="css_class='mb-3 section-bordered">
                            <h4>Registrations</h4>
                            {% if species.registrations.all.count > 0  %}
                                {% for registration in registration %}
                                    <p><b>{{registration.aquarist.get_first_name}} {{registration.aquarist.get_last_name}}</b>:       
                                    <a href="{% url 'caresRegistration' registration.id %}">{{registration.name}}</a></p>
                                {% endfor %}    
                            {% else %}
                                <p><b>None</b></p>
                            {% endif %}
                        </div-->
                        <div class="css_class='mb-3 section-bordered">
                            <h4>Edit</h4>
                            <div class="d-flex justify-content-between">
                                <a class="btn btn-secondary" href="{% url 'editCaresSpecies' species.id %}" role="button">&nbsp;&nbsp;Edit Species&nbsp;&nbsp;</a>
                                {% if species.manage_collection_locations %}
                                    <a class="btn btn-secondary" href="{% url 'speciesCollectionLocations' species.id %}" role="button">&nbsp;&nbsp;Edit Collection Locations&nbsp;&nbsp;</a>
                                {% endif %}
                                <a class="btn btn-secondary" href="{% url 'createSpeciesReferenceLink' species.id %}" role="button">&nbsp;&nbsp;Add Reference Link&nbsp;&nbsp;</a>
                            </div>
                        </div>
                    {% endif %}

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

{% endblock content %}