{% 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">
                <div class="col-md-4">
                    <img src="{% get_media_prefix %}{{ object.image }}"
                         class="card-img-top"
                         alt="card-image">
                </div>
                <div class="col-md-8">
                    <div class="card-body">
                        <h5 class="card-title">
                            {% if object.title %}{{ object.title }}{% endif %}
                            {{ object.name_full }}
                            {% if object.product_type %}({{ object.product_type }}){% endif %}
                        </h5>
                        <p class="card-text">{{ object.description }}</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <p>
                                Name:
                                <span style="font-weight: bold;">{{ object.name }}</span>
                            </p>
                        </li>
                        <li class="list-group-item">
                            <p>
                                Manufacturer:
                                <span style="font-weight: bold;">{{ object.manufacturer }}</span>
                            </p>
                        </li>
                        <li class="list-group-item">
                            <p>
                                Model no.:
                                <span style="font-weight: bold;">{{ object.model_no }}</span>
                            </p>
                        </li>
                        <li class="list-group-item">
                            <p>
                                Product no.:
                                <span style="font-weight: bold;">{{ object.product_no }}</span>
                            </p>
                        </li>
                    </ul>
                </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-specs-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#nav-specs"
                            type="button"
                            role="tab"
                            aria-controls="nav-profile"
                            aria-selected="false">Manuals</button>
                    <button class="nav-link"
                            id="nav-links-tab"
                            data-bs-toggle="tab"
                            data-bs-target="#nav-links"
                            type="button"
                            role="tab"
                            aria-controls="nav-contact"
                            aria-selected="false">Links</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 properties_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-specs"
                     role="tabpanel"
                     aria-labelledby="nav-specs-tab">specs</div>
                <div class="tab-pane fade"
                     id="nav-links"
                     role="tabpanel"
                     aria-labelledby="nav-links-tab">links</div>
            </div>
        </div>
    </div>
{% endblock %}