{% 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 %}
    <div class="float-right">
        {% trans %}id.label{% endtrans %}: {{ part.id }}
    </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-3 offset-md-0">
            {% 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-toggle="tab"
                       href="#part_lots" role="tab">
                        <i class="fas fa-box fa-fw"></i>
                        {% trans %}part.part_lots.label{% endtrans %}
                        <span class="badge badge-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-toggle="tab"
                           href="#comment" role="tab">
                            <i class="fas fa-comment-alt 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-toggle="tab" role="tab" href="#specifications">
                            <i class="fas fa-atlas fa-fw"></i>
                            {% trans %}part.info.specifications{% endtrans %}
                            <span class="badge badge-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-toggle="tab"
                           href="#attachments" role="tab">
                            <i class="fas fa-paperclip fa-fw"></i>
                            {% trans %}attachment.labelp{% endtrans %}
                            <span class="badge badge-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-toggle="tab" href="#suppliers" role="tab">
                            <i class="fas fa-shopping-cart fa-fw"></i>
                            {% trans %}vendor.partinfo.shopping_infos{% endtrans %}
                            <span class="badge badge-secondary">{{ part.orderdetails | 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-toggle="tab" href="#history" role="tab">
                        <i class="fas fa-history"></i>
                        {% trans %}vendor.partinfo.history{% endtrans %}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="tools-tab" data-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-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">
                            {{ part.comment|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 %}

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