{% extends "main_card.html.twig" %}

{% block title %}
    {% trans %}part.info.title{% endtrans %} {{ part.name }}
{% endblock %}

{% block card_type %}

    {% if timeTravel == null %}
        bg-primary text-white
    {% else %}
        bg-primary-striped text-white
    {% endif %}

{% endblock %}

{% block card_title %}
    <i class="fa {{ part.favorite ? 'fa-star' : 'fa-info-circle'}} fa-fw" aria-hidden="true"></i>
    {% trans %}part.info.title{% endtrans %} <b>"{{ part.name }}"</b>
    {% if timeTravel != null %}
        <i>({{ timeTravel | format_datetime('short') }})</i>
    {% endif %}
    {% if part.projectBuildPart %}
        (<i>{{ entity_type_label(part.builtProject) }}</i>: <a class="text-white" href="{{ entity_url(part.builtProject) }}">{{ part.builtProject.name }}</a>)
    {% endif %}
    <div class="float-end">
        {% trans %}id.label{% endtrans %}: {{ part.id }} {% if part.ipn is not empty %}(<i>{{ part.ipn }}</i>){% endif %}
    </div>
{% endblock %}

{% block card_content %}
    <div class="row">
        <div class="col-md-9">
            {% include "parts/info/_main_infos.html.twig" %}
        </div>

        <div class="col-md-3 offset-md-0 col-9 offset-3">
            {% include "parts/info/_sidebar.html.twig" %}
        </div>

    </div>

    <div class="">
        <div class="">
            <ul class="nav nav-tabs" id="partTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link {% if part.partLots %}active{% endif %}" id="part_lots-tab" data-bs-toggle="tab"
                       href="#part_lots" role="tab">
                        <i class="fas fa-box fa-fw"></i>
                        {% trans %}part.part_lots.label{% endtrans %}
                        <span class="badge bg-secondary">{{ part.partLots | length }}</span>
                    </a>
                </li>
                {% if part.comment is not empty %}
                    <li class="nav-item">
                        <a class="nav-link" id="comment-tab" data-bs-toggle="tab"
                           href="#comment" role="tab">
                            <i class="fas fa-sticky-note fa-fw"></i>
                            {% trans %}comment.label{% endtrans %}
                        </a>
                    </li>
                {% endif %}
                {% if part.parameters is not empty or description_params is not empty or comment_params is not empty %}
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" role="tab" href="#specifications">
                            <i class="fas fa-atlas fa-fw"></i>
                            {% trans %}part.info.specifications{% endtrans %}
                            <span class="badge bg-secondary">{{ part.parameters | length }}</span>
                        </a>
                    </li>
                {% endif %}
                {% if part.attachments is not empty %}
                    <li class="nav-item">
                        <a class="nav-link" id="attachment-tab" data-bs-toggle="tab"
                           href="#attachments" role="tab">
                            <i class="fas fa-paperclip fa-fw"></i>
                            {% trans %}attachment.labelp{% endtrans %}
                            <span class="badge bg-secondary">{{ part.attachments | length }}</span>
                        </a>
                    </li>
                {% endif %}
                {% if part.orderdetails is not empty %}
                    <li class="nav-item">
                        <a class="nav-link" id="supplier-tab" data-bs-toggle="tab" href="#suppliers" role="tab">
                            <i class="fas fa-shopping-cart fa-fw"></i>
                            {% trans %}vendor.partinfo.shopping_infos{% endtrans %}
                            <span class="badge bg-secondary">{{ part.orderdetails | length }}</span>
                        </a>
                    </li>
                {% endif %}

                {% if part.associatedPartsAll is not empty %}
                    <li class="nav-item">
                        <a class="nav-link" id="associations-tab" data-bs-toggle="tab" href="#associations" role="tab">
                            <i class="fas fas fa-circle-nodes fa-fw fa-fw"></i>
                            {% trans %}part.edit.tab.associations{% endtrans %}
                            <span class="badge bg-secondary">{{ part.associatedPartsAll | length }}</span>
                        </a>
                    </li>
                {% endif %}

                <li class="nav-item {% if datatable is null %}not-allowed{% endif %}">
                    <a class="nav-link {% if datatable is null %}disabled{% endif %}" id="history-tab" data-bs-toggle="tab" href="#history" role="tab">
                        <i class="fas fa-history"></i>
                        {% trans %}vendor.partinfo.history{% endtrans %}
                    </a>
                </li>
                {% if part.projectBomEntries is not empty %}
                    <li class="nav-item">
                        <a class="nav-link" id="projects-tab" data-bs-toggle="tab" href="#projects" role="tab">
                            <i class="fas fa-archive fa-fw"></i>
                            {% trans %}project.labelp{% endtrans %}
                            <span class="badge bg-secondary">{{ part.projectBomEntries | length }}</span>
                        </a>
                    </li>
                {% endif %}
                <li class="nav-item">
                    <a class="nav-link" id="tools-tab" data-bs-toggle="tab" href="#tools" role="tab">
                        <i class="fas fa-tools"></i>
                        {% trans %}tools.label{% endtrans %}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="extended_info-tab" data-bs-toggle="tab" href="#extended_info" role="tab">
                        <i class="fas fa-clipboard-list"></i>
                        {% trans %}extended_info.label{% endtrans %}
                    </a>
                </li>

            </ul>
            <div class="tab-content" id="myTabContent">
                {% if part.comment is not empty %}
                    <div class="tab-pane fade show" id="comment" role="tabpanel" aria-labelledby="home-tab">
                        <div class="container-fluid mt-2 latex" data-controller="common--latex">
                            {{ part.comment|format_markdown }}
                        </div>
                    </div>
                {% endif %}

                <div class="tab-pane fade show active" id="part_lots" role="tabpanel" aria-labelledby="part_lots-tab">
                    {% include "parts/info/_part_lots.html.twig" %}
                </div>

                {% if part.attachments is not empty %}
                    <div class="tab-pane fade" id="attachments" role="tabpanel" aria-labelledby="attachment-tab">
                        {% include "parts/info/_attachments_info.html.twig" %}
                    </div>
                {% endif %}

                {% if part.orderdetails is not empty %}
                <div class="tab-pane fade" id="suppliers" role="tabpanel" aria-labelledby="supplier-tab">
                    {%  include "parts/info/_order_infos.html.twig" %}
                </div>
                {% endif %}

                {% if part.associatedPartsAll is not empty %}
                    <div class="tab-pane fade" id="associations" role="tabpanel" aria-labelledby="associations-tab">
                        {%  include "parts/info/_associations.html.twig" %}
                    </div>
                {% endif %}

                <div class="tab-pane fade" id="projects" role="tabpanel" aria-labelledby="projects-tab">
                    {% include "parts/info/_projects.html.twig" %}
                </div>

                <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
                    {% include "parts/info/_history.html.twig" %}
                </div>

                <div class="tab-pane fade" id="tools" role="tabpanel" aria-labelledby="tools-tab">
                    {% include "parts/info/_tools.html.twig" %}
                </div>

                {% if part.parameters is not empty or description_params is not empty or comment_params is not empty %}
                    <div class="tab-pane fade" id="specifications" role="tabpanel" aria-labelledby="tools-tab">
                        {% include "parts/info/_specifications.html.twig" %}
                    </div>
                {% endif %}

                <div class="tab-pane fade" id="extended_info" role="tabpanel" aria-labelledby="extended_info-tab">

                    {% include "parts/info/_extended_infos.html.twig" %}

                </div>
            </div>
        </div>
    </div>
{% endblock %}