{# inventree-label-part-16mm.html #}

{% extends "label/label_base.html" %}

{% load l10n i18n barcode report part_templates %}

{% block style %}

.label {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    width: 58mm;
    height: 16mm;
    line-height: 1.1;
    border-bottom: 0.5pt solid black;
}

.qr {
    display: block;
    height: 15mm;
    width: 15mm;
    position: fixed;
    left: 0mm;
    top: 0mm;
}

.right-section {
    display: block;
    overflow: hidden;
    position: absolute;
    height: 16mm;
    left: 16mm;
    top: 0mm;
    width: 42mm;
}

.category-ipn {
    display: block;
    position: relative;
}

.ipn {
    padding: 0 2pt;
    border: 0.5pt solid black;
    border-radius: 2pt;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
}

.category {
    font-style: italic;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; 
    position: absolute;
    top: 0;
    right: 0;
}

.name {
    padding-top: 11pt;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; 
}

.description {
    font-weight: bold;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.error {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: red;
}
{% endblock style %}


{% block content %}
{% if not part_templates %}
    <div class="error">Plugin inventree-part-templates required</div>
{% elif part_templates.error %}
    <div class="error">{{ part_templates.error }}</div>
{% else %}
    <div class="label">
        <img class='qr' alt="{% trans 'QR Code' %}" src='{% qrcode qr_data %}'>

        <div class='right-section'>
            <div class="'category-ipn">
                <span class='category'>{{ part_templates.short_cat }}</span>
                {% if part.IPN %}
                    <span class='ipn'>{{ part.IPN }}</span>
                {% endif %}
            </div>
            <div class='name'>{{ part.name|scrub:"MPN" }}</div>
            <div class='description'>{{ part_templates.description }}</div>
        </div>
    </div>
{% endif %}
{% endblock content %}