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

{% block title %}
    {% trans with {'%name%': part.name|escape } %}part.edit.title{% endtrans %}
{% endblock %}

{% block card_title %}
    <i class="fas fa-edit fa-fw" aria-hidden="true"></i>
    {% trans with {'%name%': part.name|escape } %}part.edit.card_title{% endtrans %}
    <b><a href="{{ entity_url(part, 'info') }}" class="text-white">{{ part.name }}</a></b>
    <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 %}

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" role="tab" href="#common">
                <i class="fas fa-id-card fa-fw"></i>
                {% trans %}part.edit.tab.common{% endtrans %}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#manufacturer">
                <i class="fas fa-industry fa-fw"></i>
                {% trans %}part.edit.tab.manufacturer{% endtrans %}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#advanced">
                <i class="fas fa-shapes fa-fw"></i>
                {% trans %}part.edit.tab.advanced{% endtrans %}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#part_lots">
                <i class="fas fa-boxes fa-fw"></i>
                {% trans %}part.edit.tab.part_lots{% endtrans %}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#attachments">
                <i class="fas fa-paperclip fa-fw"></i>
                {% trans %}part.edit.tab.attachments{% endtrans %}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#orderdetails">
                <i class="fas fa-shopping-cart fa-fw"></i>
                {% trans %}part.edit.tab.orderdetails{% endtrans %}
            </a>
        </li>
        <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.edit.tab.specifications{% endtrans %}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#associations">
                <i class="fas fa-circle-nodes fa-fw"></i>
                {% trans %}part.edit.tab.associations{% endtrans %}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#eda">
                <i class="fas fa-compass-drafting fa-fw"></i>
                {% trans %}part.edit.tab.eda{% endtrans %}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" role="tab" href="#comment">
                <i class="fas fa-sticky-note fa-fw"></i>
                {% trans %}part.edit.tab.comment{% endtrans %}
            </a>
        </li>
    </ul>

    {{ form_start(form) }}
    <div class="tab-content">

        <div class="tab-pane fade show active p-2" id="common" role="tabpanel">
            {% include "parts/edit/_main.html.twig" %}
        </div>
        <div class="tab-pane fade p-2" id="manufacturer" role="tabpanel">
            {% include "parts/edit/_manufacturer.html.twig" %}
        </div>
        <div class="tab-pane fade p-2" id="advanced" role="tabpanel">
            {% include "parts/edit/_advanced.html.twig" %}
        </div>
        <div class="tab-pane fade p-2" id="part_lots" role="tabpanel">
            {% include "parts/edit/_lots.html.twig" %}
        </div>
        <div class="tab-pane fade p-2" id="attachments" role="tabpanel">
            {% include "parts/edit/_attachments.html.twig" %}
        </div>
        <div class="tab-pane fade p-2" id="orderdetails" role="tabpanel">
            {% include "parts/edit/_orderdetails.html.twig" %}
        </div>
        <div class="tab-pane fade p-2" id="specifications" role="tabpanel">
            {% include "parts/edit/_specifications.html.twig" %}
        </div>
        <div class="tab-pane fade p-2" id="associations" role="tabpanel">
            {% include "parts/edit/_associated_parts.html.twig" %}
        </div>
        <div class="tab-pane fade p-2" id="eda" role="tabpanel">
            {% include "parts/edit/_eda.html.twig" %}
        </div>
        <div class="tab-pane fade p-2" id="comment" role="tabpanel">
            {{ form_widget(form.comment)}}
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-9 offset-sm-3">
            <div class="btn-group">
                {{ form_widget(form.save) }}
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <div class="dropdown-menu">
                    {{ form_widget(form.save_and_clone, {'attr': {'class': 'dropdown-item'}}) }}
                    {{ form_widget(form.save_and_new, {'attr': {'class': 'dropdown-item'}}) }}
                    <div class="dropdown-divider"></div>
                    <div class="px-2">
                        <label class="form-label">{% trans %}edit.log_comment{% endtrans %}</label>
                        {{ form_widget(form.log_comment)}}
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{ form_row(form.reset) }}
    {{ form_errors(form) }}
    {{ form_end(form) }}
{% endblock %}