{% extends 'lara_django_base/lara_base.html' %}


{% load static %}

{% block toolbar %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"> {{ section_title }} </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="{% url update_link  object.pk %}" class="btn btn-warning" role="button">Edit Item</a>

        </div>
    </div>
</div>
{% endblock %}

{% block content %}


<div class="container">
    <div class="card mb-6">
        <div class="row g-0">
            {%if object.substance.image %}
            <div class="col-md-4">
                <img src="{% get_media_prefix %}{{ object.substance.image }}" class="card-img-top" alt="card-image">
            </div>
            {% endif %}
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">{% if object.name %}{{ object.name }} {% else %} {{ object.name_full }} {% endif %} 
                        {% if object.data_type %}({{ object.data_type }}) {% endif %}</h5>
                    <p class="card-text"> {{ object.description }}</p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <p> Synonyms:
                            
                            <span style="font-weight: bold;"> {{ object.substance.synonyms }} </span>
                        </p>
                    </li>
                    <li class="list-group-item">
                        <p> IUPAC name:
                            
                            <span style="font-weight: bold;"> {{ object.substance.IUPAC_name }} </span>
                        </p>
                    </li>
                    <li class="list-group-item">
                        <p> CAS:
                            
                            <span style="font-weight: bold;"> {{ object.substance.CAS }} </span>
                        </p>
                    </li>
                    <li class="list-group-item">
                        <p> Molecular weight (g/mol):
                            
                            <span style="font-weight: bold;"> {{ object.substance.mwt }} </span>
                        </p>
                    </li>
                    <li class="list-group-item">
                        <p> Location:
                            
                            <span style="font-weight: bold;"> {{ object.location }} </span>
                        </p>
                    </li>
                    <li class="list-group-item">
                        <p>
                            Users:
                            {% for user in object.users.all %}
                            
                            <span style="font-weight: bold;"> {{ user.name_full }} ({{ user.acronym }}) </span> {% if not forloop.last %},{% endif %}
                            {% endfor %}
                           
                        </p>
                    </li>
                    <li class="list-group-item">
                        <p>
                            Groups:
                            {% for group in object.groups.all %}
                            <span style="font-weight: bold;"> {{ group.name }} </span>
                            {% endfor %}
                        </p>
                    </li>
                </ul>
                <div class="card-body">
                    <!-- p style="font-weight: bold;"> ORCID: <a href="{{ object.ORCID }}" class="card-link"> {{ object.ORCID }} </a> </p-->   
                </div>
            </div>
        </div>
    </div>
    <div class="card mb-6">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" role="tablist">
                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" 
                        type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
                <button class="nav-link" id="nav-references-tab" data-bs-toggle="tab" data-bs-target="#nav-references" 
                        type="button" role="tab" aria-controls="nav-references" aria-selected="false">References</button>
              </div>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <table class="table table-hover">
                        <thead>
                          <tr>
                            <th scope="col"></th>
                            <th scope="col"></th>
                            <th scope="col"></th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for key, value in contact_dict.items %}
                          <tr>
                            <th scope="row" style="font-size: larger;">{{ key  }}</th>
                            <td>{{ value | urlize }}</td>
                            <td></td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                </div>
                <div class="tab-pane fade" id="nav-references" role="tabpanel" aria-labelledby="nav-references-tab">
                    <table class="table table-hover">
                        <thead>
                          <tr>
                            <th scope="col"></th>
                            <th scope="col"></th>
                            <th scope="col"></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row" style="font-size: larger;">e-mail</th>
                            <td> urlize - {{ object.email | urlize }} </td> 
                            <td></td>
                          </tr>
                          <tr>
                            <th scope="row" style="font-size: larger;">Tel.(office)</th>
                            <td>{{ object.phone_number_office }}</td>
                            <td></td>
                          </tr>
                          <tr>
                            <th scope="row" style="font-size: larger;">Tel.(lab)</th>
                            <td>{{ object.phone_number_lab }}</td>
                            <td></td>
                          </tr>
                          <tr>
                            <th scope="row" style="font-size: larger;"> Tel.(mobile)</th>
                            <td>{{ object.phone_number_mobile }}</td>
                            <td></td>
                          </tr>
                        </tbody>
                      </table>
                </div>
              </div>
        </div>
</div>
{% endblock %}