{% 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">
            <div class="row">
                <div class="col-md-3">
                    <img src="{{ main_image }}" class="img-fluid img-thumbnail bg-light" alt="Part main image" height="300" width="300">
                </div>
                <div class="col-md-9">
                    <h5 class="text-muted pt-2" title="{% trans %}manufacturer.label{% endtrans %}">{{ part.manufacturer.name ?? ""}}</h5>
                    <h3>{{ part.name }}
                        {# You need edit permission to use the edit button #}
                        {% if is_granted('edit', part) %}
                            <a href="{{ part|entityURL('edit') }}"><i class="fas fa-fw fa-sm fa-edit"></i></a>
                        {% endif %}
                    </h3>
                    <h6 class="text-muted"><span title="{% trans %}description.label{% endtrans %}">{{ part.description|bbCode }}</span></h6>
                    <h6 class=""  title="{% trans %}category.label{% endtrans %}">
                        <i class="fas fa-tag fa-fw"></i>
                        <span class="text-muted">{{  part.category.fullPath ?? "-"}}</span>
                    </h6>
                    <h6 class=""  title="{% trans %}storelocation.label{% endtrans %}">
                        <i class="fas fa-cube fa-fw"></i>
                        <span class="text-muted">{{  part.storelocation.fullPath ?? "-"}}</span>
                    </h6>
                    <h6><i class="fas fa-shapes fa-fw"></i>
                        <span class="text-muted">
                                    <span title="{% trans %}instock.label{% endtrans %}">{{ part.instock }}</span>
                                    /
                                    <span title="{% trans %}mininstock.label{% endtrans %}">{{ part.mininstock }}</span>
                                </span>
                    </h6>
                    <h6 class="" title="{% trans %}footprint.label{% endtrans %}">
                        <i class="fas fa-microchip fa-fw" ></i>
                        <span class="text-muted">{{ part.footprint.fullPath ?? "-"}}</span>
                    </h6>
                    <h6 title="{% trans %}part.avg_price.label{% endtrans %}">
                        <i class="fas fa-money-bill-alt fa-fw"></i>
                        <span class="text-muted">{{ "TODO" }}</span>
                    </h6>
                    {#
                    {% if part.comment != "" %}
                        <h6 title="{% trans %}comment.label{% endtrans %}">
                            <i class="fas fa-comment-alt fa-fw"></i>
                            <div class="d-inline-flex">
                                <span class="text-muted">{{ part.comment|nl2br }}</span>
                            </div>
                        </h6>
                    {% endif %} #}
                </div>
            </div>

            <div class="mt-3">
                <ul class="nav nav-tabs" id="partTab" role="tablist">
                    {% if part.comment is not empty %}
                        <li class="nav-item">
                            <a class="nav-link active" 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 {% if part.comment is empty%} active{% endif %}" 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>
                </ul>
                <div class="tab-content" id="myTabContent">
                    {% if part.comment is not empty %}
                        <div class="tab-pane fade show active" id="comment" role="tabpanel" aria-labelledby="home-tab">
                            <div class="container-fluid mt-2">
                                {{ part.comment|bbCode }}
                            </div>
                        </div>
                    {% endif %}
                    <div class="tab-pane fade {% if part.comment is empty %} show active{% endif %}" id="attachments" role="tabpanel" aria-labelledby="profile-tab">
                        Test
                    </div>
                    <div class="tab-pane fade" id="suppliers" role="tabpanel" aria-labelledby="profile-tab">

                    </div>
                    <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="profile-tab">
                        TODO
                    </div>
                    <div class="tab-pane fade" id="tools" role="tabpanel" aria-labelledby="contact-tab">
                        {% if is_granted('edit', part) %}
                            <a href="{{ part|entityURL('edit') }}" class="btn btn-primary mt-3">
                                <i class="fas fa-fw fa-edit"></i>
                                {% trans %}part.edit.btn{% endtrans %}
                            </a>
                        {% endif %}


                        {% if is_granted('create', part) %}
                        <br>
                        <div class="btn-group mt-2">
                            <a class="btn btn-primary" href="{{ part|entityURL('clone') }}">
                                <i class="fas fa-clone"></i>
                                {% trans %}part.clone.btn{% endtrans %}
                            </a>
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <div class="dropdown-menu" role="menu">
                                <a class="dropdown-item" href="{{ part|entityURL('create') }}">
                                    <i class="fas fa-plus-square"></i>
                                    {% trans %}part.create.btn{% endtrans %}
                                </a>
                            </div>
                        </div>
                        {% endif %}

                    </div>
                </div>
            </div>

        </div>

        <div class="col-md-3">

            <form action="" method="post" class="d-print-none no-progbar">
                <input type="hidden" name="pid" value="{$pid}">
                <div class="row">
                    <div class="col-md-12">
                        <label for="n_less">{% trans %}part.withdraw.caption:{% endtrans %}</label>
                        <div class="input-group">
                            <input type="number" class="form-control" name="n_less" min="0" max="999999" value="1" placeholder="Anzahl">
                            <div class="input-group-append">
                                <div class="btn-group">
                                    <button type="submit" class="btn btn-outline-secondary btn-group-append" name="dec"> {% trans %}part.withdraw.btn{% endtrans %}</button>
                                    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
                                    <div class="dropdown-menu">
                                        <div class="px-4 py-3">
                                            <div class="form-group">
                                                <label>{% trans %}part.withdraw.comment:{% endtrans %}</label>
                                                <input type="text" class="form-control" name="instock_change_comment" placeholder="{{ "TODO" }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <p></p>

            <form action="" method="post" class="d-print-none no-progbar">
                <input type="hidden" name="pid" value="{$pid}">
                <div class="row">
                    <div class="col-md-12">
                        <label for="n_more">{% trans %}part.add.caption{% endtrans %}</label>
                        <div class="input-group">
                            <input type="number" class="form-control" name="n_more" min="0" max="999999" value="1">
                            <div class="input-group-append">
                                <div class="btn-group">
                                    <button type="submit" class="btn  btn-outline-secondary btn-group-append" name="inc" >{% trans %}part.add.btn{% endtrans %}</button>
                                    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
                                    <div class="dropdown-menu">
                                        <div class="px-4 py-3">
                                            <div class="form-group">
                                                <label>{% trans %}part.add.comment{% endtrans %}</label>
                                                <input type="text" class="form-control" name="instock_change_comment" placeholder="TODO">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <p></p>

            {#
            {if $can_order_read && !$instock_unknown}
            <form action="" method="post" class="d-print-none no-progbar">
                <input type="hidden" name="pid" value="{$pid}">
                <div class="row">
                    <div class="col-md-12">
                        {if $manual_order_exists}
                        <label for="remove_mark_to_order">{% trans %}Part was marked for ordering manually.{% endtrans %}</label>
                        <button type="submit" class="btn btn-outline-secondary"
                                name="remove_mark_to_order" >
                        {% trans %}Cancel{% endtrans %}</button>
                        {else}
                        {if $auto_order_exists}
                        <i>{% trans %}The part is listed under "Parts marked for ordering", because the in stock amount is less than the minimum in stock value.{% endtrans %}</i>
                        {else}
                        <label for="order_quantity">{% trans %}Mark for ordering:{% endtrans %}</label>
                        <div class="input-group">
                            <input type="number" min="0" max="999999" class="form-control" value="1" name="order_quantity"
                                   placeholder="Order quantity" {if !$can_order_edit}disabled{/if}><br>
                            <span class="input-group-append">
                                            <button type="submit" class="btn btn-outline-secondary"
                                                    name="mark_to_order" {if !$can_order_edit}disabled{/if}>{% trans %}Apply{% endtrans %}</button>
                                        </span>
                        </div>
                        {/if}
                        {/if}
                    </div>
                </div>
            </form>
            {/if}
            #}

            <p></p>

            <div class="form-group">
                <label>{% trans %}createdAt{% endtrans %}:</label>
                <p>{{ part.addedDate | localizeddate("long")}}
                    {#{if !empty($creation_user)} {% trans %}by{% endtrans %}
                    {if $can_visit_user}
                    <a href="{$relative_path}user_info.php?uid={$creation_user_id}">{$creation_user}</a>
                    {else}
                    {$creation_user}
                    {/if}
                    {/if} #}
                </p>
            </div>

            <p></p>

            <div class="form-group">
                <label>{% trans %}lastModified{% endtrans %}:</label>
                <p>{{ part.lastModified | localizeddate("long") }}
                    {# {if !empty($last_modified_user)} {% trans %}by{% endtrans %}
                    {if $can_visit_user}
                    <a href="{$relative_path}user_info.php?uid={$last_modified_user_id}">{$last_modified_user}</a>
                    {else}
                    {$last_modified_user}
                    {/if}
                    {/if} #}
                </p>
            </div>

            <p></p>

            {#
            <form action="show_part_label.php" class="d-print-none">
                {if $can_generate_barcode}
                {if count($barcode_profiles) > 0}
                <input type="hidden" name="label_generate">
                <input type="hidden" name="id" value="{$pid}">

                <div class="btn-group btn-block">
                    <button type="submit" class="btn btn-secondary btn-block"><i class="fa fa-barcode fa-fw" aria-hidden="true"></i>
                        {% trans %}Barcode erzeugen{% endtrans %}</button>
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>

                    <ul class="dropdown-menu dropdown-menu-right" id="label-dropdown">
                        {foreach $barcode_profiles as $profile}
                        <a href="#" class="link-anchor dropdown-item" onclick="submitFormSubmitBtn($(this).closest('form'), $('#profile_btn_{$profile|replace:" ":"_"}'));">{$profile}</a>
                        <button type="submit" name="profile" id="profile_btn_{$profile|replace:" ":"_"}" value="{$profile}" class="d-none">{$profile}</button>
                        {/foreach}
                    </ul>

                </div>
                {else}
                <input type="hidden" name="id" value="{$pid}">
                <input type="hidden" name="generator" value="part">
                <input type="hidden" name="size" value="50x30">
                <input type="hidden" name="preset" value="Preset A">
                <input type="hidden" name="label_generate">
                <button type="submit" class="btn btn-secondary btn-block"><i class="fa fa-barcode fa-fw" aria-hidden="true"></i>
                    {% trans %}Create barcode{% endtrans %}</button>
                {/if}
            </form>

            <p></p>
            {/if}

            <div class=" d-print-none">
                <button type="button" class="btn btn-secondary btn-block" onclick="window.print();"><i class="fa fa-print fa-fw" aria-hidden="true"></i>
                    {% trans %}Print{% endtrans %}
                </button>
            </div>

            <p></p>

            <div class=" d-print-none">
                <div class="dropdown">
                    <button class="btn btn-secondary btn-block dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <i class="fa fa-file fa-fw" aria-hidden="true"></i> {% trans %}Datasheet links{% endtrans %}
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        {foreach $datasheet_loop as $sheet}
                        <li>
                            <a class="link-datasheet datasheet dropdown-item" title="{$sheet.name}" href="{$sheet.url}" target="_blank">
                                <img class="companypic-bg" src="{$relative_path}{$sheet.image}" alt="{$sheet.name}">
                                &nbsp;{$sheet.name}
                            </a>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        </div>
        #}
        </div>

    </div>
{% endblock %}