{% 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 %}