shimatta-kenkyusho/shimatta_kenkyusho/templates/parts/components-detail.html

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

{% block content %}
<div class="container">
    <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>
</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 %}

{% endblock content %}