{% extends 'lara_django_base/lara_base.html' %}
{% load static %}
{% block content %}
    <div class="max-w-6xl mx-auto py-6 sm:px-6 lg:px-8">
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="col-span-3 md:col-span-1 text-left md:text-right mt-2 md:mt-0">
                <a href="{% url update_link  object.pk %}"
                   class="btn btn-warning bg-orange-500 text-white">Edit</a>
            </div>
            <div class="px-4 py-5 sm:px-6 flex flex-col md:flex-row gap-4">
                <div class="md:w-5/6  p-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        {% if object.name_display %}
                            {{ object.name_display }}
                        {% else %}
                            {{ object.name_full }}
                        {% endif %}
                        {% if object.data_type %}({{ object.data_type }}){% endif %}
                    </h3>
                    <ul class="list-none p-0">
                        <li class="py-2">
                            <p>
                                First Name:
                                <span style="font-weight: bold">{{ object.name_first }}</span>
                            </p>
                        </li>
                        <li class="py-2">
                            <p>
                                Last Name:
                                <span style="font-weight: bold">{{ object.name_last }}</span>
                            </p>
                        </li>
                        <li class="py-2">
                            <p>
                                Nick Name:
                                <span style="font-weight: bold">{{ object.name_nickname }}</span>
                            </p>
                        </li>
                        <li class="py-2">
                            <p>
                                Acronym:
                                <span style="font-weight: bold">{{ object.acronym }}</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="md:w-1/6  p-4">
                    {% if object.image %}
                        <figure class="flex">
                            <a href="{% get_media_prefix %}{{ object.image }}">
                                <img src="{% get_media_prefix %}{{ object.image }}"
                                     class="card-img-top"
                                     alt="image">
                            </a>
                        </figure>
                    {% endif %}
                </div>
            </div>
            <div class="border-t border-gray-200 bg-gray-50 px-4 py-5 sm:gap-4 sm:px-6">
                <h4 class="card-text h4 pl-2">Description: {{ object.description }}</h4>
                <div role="tablist" class="tabs tabs-lifted">
                    <input type="radio"
                           name="my_tabs_2"
                           role="tab"
                           class="tab"
                           aria-label="Contact Info"
                           checked="checked" />
                    <div role="tabpanel"
                         class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                        <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>
                    <input type="radio"
                           name="my_tabs_2"
                           role="tab"
                           class="tab"
                           aria-label="Tab 2" />
                    <div role="tabpanel"
                         class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                        <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>
                    <input type="radio"
                           name="my_tabs_2"
                           role="tab"
                           class="tab"
                           aria-label="Tab 3" />
                    <div role="tabpanel"
                         class="tab-content bg-base-100 border-base-300 rounded-box p-6">
                        <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>
                                        <a style="font-weight: normal" href="mailto: {{ object.email }}">{{ object.email }}</a>
                                    </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>
    </div>
{% endblock content %}
