{% 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">
            <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>
            <h4 class="card-text h4 pl-2">
                Description: {{ object.description }}
            </h4>
        </div>
        <div
            class="border-t border-gray-200 bg-gray-50 px-4 py-5 sm:gap-4 sm:px-6"
        >
            <ul class="list-group list-group-flush">
              <li class="list-group-item">
                <p> Name:
                    
                    <span style="font-weight: bold;"> {{ object.name_full }} </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 role="tablist" class="tabs tabs-lifted">
                <input
                    type="radio"
                    name="my_tabs_2"
                    role="tab"
                    class="tab"
                    aria-label="Tab 1"
                    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 %}