{% extends 'base.html' %}

{% load static %}
{% load crispy_forms_tags %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="row justify-content-center">
                {% if package.image %}
                    <img src="{{package.image.url}}" alt="{{package.name}}" class="component-img-big btn" data-bs-toggle="modal" data-bs-target="#pkg-img-modal">
                {% else %}
                    <img src="{% static 'css/icons/card-image.svg' %}" alt="{{package.name}}" class="component-img-def-big">
                {% endif %}
            </div>
            <div class="row">
                <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#pkg-delete-modal"><i class="bi bi-file-x"></i> Delete {{package.name}}</button>
            </div>
        </div>
        <div class="col m-1">
        <h2>Package {{package.name}}</h2>
        <form action="" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{edit_form|crispy}}
            <input type="submit" class="btn btn-primary" value="Save" name="submit-pkg-edit">
        </form>
        </div>
        <div class="col-md-3">
            <h3>Parameters <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#new-component-parameter-modal"><i class="bi bi-plus-circle"></i></button></h3>
            <table class="table align-middle mb-3">
                <thead>
                    <th scope="col">Parameter</th>
                    <th scope="col">Value</th>
                    <th scope="col"></th>
                </thead>
                <tbody>
                    {% for param in parameters %}
                    <tr>
                        <td>
                            <h6 {% if param.parameter_type.parameter_description %} class="accordion-header" data-bs-toggle="collapse" data-bs-target="#collapse-parameter-desc-{{forloop.counter}}"{% endif %}>
                                {{param.parameter_type.parameter_name}}
                            </h6>
                        </td>
                        <td>
                            {{param.resolved_value_as_string}}
                        </td>
                        <td>
                            <form method="post">
                                {% csrf_token %}
                                <input type="hidden" value="{{param.id}}" name="param_num">
                                <button class="btn btn-danger" name="submit-delete-param">X</button>
                            </form>    
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div class="accordion" id="accordion-param-desc">
                {% for param in parameters %}
                {% if param.parameter_type.parameter_description %}
                <div class="collapse accordion-collapse" id="collapse-parameter-desc-{{forloop.counter}}" data-bs-parent="#accordion-param-desc">
                    {{param.parameter_type.parameter_description}}
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% if package.image %}
<div class="modal fade" id="pkg-img-modal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5>{{package.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="{{package.image.url}}">
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Delete modal -->
<div class="modal fade" id="pkg-delete-modal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5>{{package.name}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h4>Delete this package?</h4>
                {% if delete_error %}
                <div class="alert alert-danger">
                    {{delete_error}}
                </div>
                {% if protected_components %}
                <h4>Following components prevent the deletion:</h4>
                <ul>
                    {% for comp in protected_components %}
                    <li><a class="text-decoration-none text-primary" href="{% url 'parts-components-detail' uuid=comp.id %}">{{comp}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endif %}
            </div>
            <div class="modal-footer">
                <form action="" method="post">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger" name="submit-pkg-delete"><i class="bi bi-file-x"></i> Delete {{package.name}}</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% include 'parts/modals/new-component-parameter-modal.html' with component_name=object.name form=new_param_form %}

{% endblock content %}

{% block custom_scripts %}
<script type="text/javascript">
{% if delete_error %}
bootstrap.Modal.getOrCreateInstance(document.getElementById('pkg-delete-modal')).show();
{% endif %}
</script>

{% endblock custom_scripts %}