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

{% block title %}
    {% trans %}part.info.title{% endtrans %} {{ part.name }}
{% 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>
    <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">
            {% include "Parts/info/_sidebar.html.twig" %}
        </div>

    </div>

    <div class="">
        <div class="">
            <ul class="nav nav-tabs" id="partTab" role="tablist">
                {% if part.partLots %}
                    <li class="nav-item">
                        <a class="nav-link active" 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 %}
                        </a>
                    </li>
                {% endif %}

                {% 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 %}
                <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 %}
                    </a>
                </li>
                <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 %}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" 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">
                            {{ 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>

                <div class="tab-pane fade" id="attachments" role="tabpanel" aria-labelledby="attachment-tab">
                    {% include "Parts/info/_attachments_info.html.twig" %}
                </div>

                <div class="tab-pane fade" id="suppliers" role="tabpanel" aria-labelledby="supplier-tab">
                    {%  include "Parts/info/_order_infos.html.twig" %}
                </div>

                <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
                    TODO
                </div>

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

                    {% include "Parts/info/_tools.html.twig" %}

                </div>

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