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

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

{% block content %}
    <div class="card border-primary">
        <div class="card-header bg-primary text-white">
            <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>
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-md-9">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="https://via.placeholder.com/300" class="img-fluid img-thumbnail" 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 }}</h3>
                            <h6 class="text-muted"><span title="{% trans %}description.label{% endtrans %}">{{ part.description }}</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>
                                <span class="text-muted">{{ part.comment }}</span>
                            </h6>
                            {% endif %}
                        </div>
                    </div>

                    <div class="mt-3">
                        <ul class="nav nav-tabs" id="partTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="attachment-tab" data-toggle="tab"
                                   href="#attachments" role="tab" aria-controls="home" aria-selected="true">
                                    <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" aria-controls="profile" aria-selected="false">
                                    <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" aria-controls="contact" aria-selected="false">
                                    <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" aria-controls="contact" aria-selected="false">
                                    <i class="fas fa-tools"></i>
                                    {% trans %}tools.label{% endtrans %}
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="attachments" role="tabpanel" aria-labelledby="home-tab">

                            </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">
                                <form class="mt-3">
                                    <div class="form-group">
                                        <label>{% trans %}part.delete.caption{% endtrans %}:</label>
                                        <button class="btn btn-danger">{% trans %}part.delete.btn{% endtrans %}</button>
                                    </div>
                                </form>
                            </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.datetimeAdded | date}}
                            {#{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.addedDate | date }}
                            {# {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>

        </div>

    </div>
{% endblock %}