{% 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>
        <script>
        let myCanvas = new ChemDoodle.ViewerCanvas('id', 150, 150);
        myCanvas.emptyMessage = 'No Data Loaded!';
        let caffeineMolFile =
            'Molecule Name\n  CHEMDOOD08070920033D 0   0.00000     0.00000     0\n[Insert Comment Here]\n 14 15  0  0  0  0  0  0  0  0  1 V2000\n   -0.3318    2.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318    1.0000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980    0.5000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342    0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640    1.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804    0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640   -1.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -1.0000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    2.0640   -0.0000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    1.7910    1.7553    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804   -0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -2.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  3  2  1  0  0  0  0\n  4  2  1  0  0  0  0\n  3  5  1  0  0  0  0\n  3  6  1  0  0  0  0\n  7  4  1  0  0  0  0\n  4  8  2  0  0  0  0\n  9  5  2  0  0  0  0\n 10  5  1  0  0  0  0\n 10  8  1  0  0  0  0\n  7 11  1  0  0  0  0\n  7 12  1  0  0  0  0\n 13  8  1  0  0  0  0\n 13 11  2  0  0  0  0\n 10 14  1  0  0  0  0\nM  END\n> <DATE>\n07-08-2009\n';
        let caffeine = ChemDoodle.readMOL(caffeineMolFile);
        myCanvas.loadMolecule(caffeine);
        </script>
    </div>
    <div class="container">
        <div class="card mb-6">
            <div class="row g-0">
                {% if object.image %}
                    <div class="col-md-4">
                        <img src="{% get_media_prefix %}{{ object.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.synonyms }}</span>
                            </p>
                        </li>
                        <li class="list-group-item">
                            <p>
                                IUPAC name:
                                <span style="font-weight: bold;">{{ object.iupac_name }}</span>
                            </p>
                        </li>
                        <li class="list-group-item">
                            <p>
                                CAS:
                                <span style="font-weight: bold;">{{ object.cas }}</span>
                            </p>
                        </li>
                        <li class="list-group-item">
                            <p>
                                Molar mass (g/mol):
                                <span style="font-weight: bold;">{{ object.mass_molar }}</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>
    <link rel="stylesheet" href="static/css/ChemDoodleWeb.css" type="text/css">
    <script type="text/javascript" src="[path]/ChemDoodleWeb.js"></script>
{% endblock %}