{% extends 'main.html' %}
{% load static %}
<!-- context = {species, speciesComments, 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>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>Alternate Name:</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>Category:</b> &nbsp;&nbsp;{{species.get_category_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>
                    {% if renderCares %}
                        <p><b>CARES Classification:</b>&nbsp;&nbsp;<font style="color:#860404;">{{species.get_cares_classification_display}}</font></p>
                        {% if species.iucn_red_list != 'UN' and species.iucn_red_list != 'DD' and species.iucn_red_list != 'NE' %}   
                            <p><b>IUCN Red List Status:</b>&nbsp;&nbsp;<font style="color:#860404;">{{species.get_iucn_red_list_display}}</font></p>
                        {% endif %}      
                    {% endif %}            
                    <small>&nbsp;</small>

                    {% 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"><b>{{speciesReferenceLink.name}}</b></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 %}

                    <div class="css_class='mb-3 section-bordered">
                        <h4>Aquarists keeping this Species</h4>
                        {% if species.species_instances.all.count > 0  %}
                            {% for speciesInstance in speciesInstances %}
                                {% if speciesInstance.currently_keep %}
                                    <p><b>{{speciesInstance.user.get_display_name}}</b>:       
                                    <a href="{% url 'speciesInstance' speciesInstance.id %}">{{speciesInstance.name}}</a></p>
                                {% endif %}
                            {% endfor %}    
                        {% else %}
                            <p><b>None</b></p>
                        {% endif %}
                        {% if request.user.is_authenticated %}
                            <p><a class="btn btn-secondary" href="{% url 'createSpeciesInstance' species.id  %}" role="button"><i>I keep this species!</i></a></p>
                        {% endif %}  
                    </div>
                        
                    {% if userCanEdit %}
                        <div class="css_class='mb-3 section-bordered">
                            <h4>Edit Species</h4>
                            <p><a class="btn btn-secondary" href="{% url 'editSpecies' species.id  %}" role="button">&nbsp;Edit Species Profile&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a class="btn btn-secondary" href="{% url 'createSpeciesReferenceLink' species.id  %}" role="button">&nbsp;&nbsp;Add Reference Link&nbsp;&nbsp;</a></p>
                        </div>
                    {% endif %}

                    {% if request.user.is_authenticated %}
                        <div class="css_class='mb-3 section-bordered">
                            <h4>Species Feedback</h4>
                            <p>Please use the Species Feedback button to provide helpful comments or corrections. <i>Only admins will see your submission.</i></p>
                            <p><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;Submit Species Feedback&nbsp;</a></p>
                        </div>
                    {% endif %}

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

{% endblock content %}