{% 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>
</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>


{% 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 %}