{% extends 'base.html' %}
{% load static %}
{% load qr_code %}
{% load crispy_forms_tags %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="row justify-content-center">
                {% if component.get_resolved_image %}
                    <img src="{{component.get_resolved_image}}" alt="{{component.name}}" class="component-img-big btn" data-bs-toggle="modal" data-bs-target="#comp-img-modal">
                {% else %}
                    <img src="{% static 'css/icons/card-image.svg' %}" alt="{{component.name}}" class="component-img-def-big">
                {% endif %}
            </div>
            <div class="row">
                {% qr_from_text component.get_qr_code size="m" image_format="svg" %}
            </div>
            <div class="row">
            {% if component.datasheet_link %}
            <a class="btn btn-secondary mb-2" href="{{component.datasheet_link}}"><i class="bi bi-file-pdf-fill"></i> Datasheet</a>
            {% endif %}
            <button class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#comp-edit-modal"><i class="bi bi-pencil-square"></i> Edit Component</button>
            </div>
        </div>
        <div class="col m-1">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Package</th>
                        <th scope="col">Manufacturer</th>
                        <th scope="col">Type</th>
                        <th scope="col">Total #</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="align-middle" scope="row">
                            {{component.name}}
                        </td>
                        <td class="align-middle" >
                            {% if component.package %}
                            <a href="{% url 'parts-packages-detail' uuid=component.package.id %}" class="link-primary text-decoration-none">{{component.package.name}}</a>
                            {% if component.package.image %}
                            <img src="{{component.package.image.url}}" class="component-img-small">
                            {% endif %}
                            {% endif %}
                        </td>
                        <td class="align-middle" >
                            {% if component.manufacturer %}
                            <a href="{% url 'parts-manufacturers-detail' uuid=component.manufacturer.id %}" class="link-primary text-decoration-none">{{component.manufacturer.name}}</a>
                            {% if component.manufacturer.image %}
                            <img src="{{component.manufacturer.image.url}}" class="component-img-small">
                            {% endif %}
                            {% endif %}
                        </td>
                        <td class="align-middle">
                            {% if component.component_type %}{{component.component_type.class_name}}{% endif %}
                        </td>
                        <td class="align-middle">
                            {{component.get_total_amount}}
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="row">
                <div class="col">
                    <h2>Description</h2>
                    {% if component.description %}
                        {{component.description|linebreaks}}
                    {% else %}
                        <div class="alert alert-secondary" role="alert">
                            No description available
                        </div>
                    {% endif %}
                </div>
                <div class="col-4">
                    {% if component.pref_distri %}
                    <h4>Preferred Distributor</h4>
                    <div class="d-flex align-items-center">
                        {% if component.pref_distri.image %}
                        <div class="flex-shrink-0">
                            <img src="{{component.pref_distri.image.url}}" alt="{{component.pref_distri.name}}" class="component-img-big">
                        </div>
                        <div class="flex-grow-1 ms-2">
                            <h6>{{component.pref_distri.name}}</h6>
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h3>Parameters</h3>
                </div>
                <div class="col">
                    <h3>Distributor Part Numbers</h3>
                    
                </div>
            </div>
            <div class="row mt-2">
                <table class="table">
                    <thead>
                        <th scope="col">Storage</th>
                        <th scope="col">Amount</th>
                    </thead>
                    <tbody>
                        {% for stock in stocks %}
                        <tr>
                            <td><a class="text-decoration-none text-primary" href="{% url 'parts-stocks-detail' uuid=stock.storage.id %}">{{stock.storage.get_full_path}}</a></td>
                            <td>{{stock.amount}}</td>
                        <tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>            
        </div>
    </div>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{comp_form|crispy}}
        <input type="submit" name="submit-edit-component" value="Submit">
    </form>
</div>

{% if component.get_resolved_image %}
<div class="modal fade" id="comp-img-modal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5>{{component.name}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <img class="component-img-huge" src="{{component.get_resolved_image}}">
                </div>
                {% if not component.image %}
                    <hr>
                    <div class="alert alert-warning">
                        Component doesn't have an image. The image is inherited from its package.
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endif %}
{% include 'parts/modals/edit-component-modal.html' with heading="Edit "|add:component.name form=edit_form %}
{% endblock content %}

{% block custom_scripts %}

<script type="text/javascript">
{% if edit_form.errors %}
bootstrap.Modal.getOrCreateInstance(document.getElementById('comp-edit-modal')).show()
{% endif %}
</script>
{% endblock custom_scripts %}