{% load static %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'informes/css/style.css' %}">

{% if is_area_18 or has_permissions %}

<main class="iframe-page" style="height: 100%;">
    <iframe src="{{ url_data.url }}" frameborder="0" style="width:100%; height:100%;"></iframe>
    <div id="bottom-bar"></div>
</main>
{% else %}
<main class="solicitudes-page" >
    <div class="content-card">
        <header class="content-card-header">
            <h1 class="content-card-title">
               {{ url_data.nombre }}
            </h1>
        </header>
        <div class="content-card-body">
            <div class="grid-container">
                <div class="card" id="descripcion-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        Descripcion
                        <button class="btn btn-warning">Datahub</button>
                    </div>
                    <div class="card-body">
                        <div id="descripcion-dinamica">
                        {{ url_data.descrip }}
                        </div>
                    </div>
                </div>
                <div class="card" id="solicitar-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        Solicitar Informe
                        <button class="btn btn-warning solicitar-informe-btn"
                                data-url-id="{{ url_data.id }}"
                                data-area-id="{{ url_data.area.id }}"
                                data-user-id="{{ user.user_id }}">
                            Solicitar
                        </button>                    </div>

                    <div class="card-body">
                        <div>
                            <b>Responsable del Informe: </b>
                            <div id="responsable-dinamica">
                                {% if responsables %}
                                    <p>{{ responsables }}</p>
                                {% else %}
                                    <p>No hay responsables asignados.</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="imagen-container">
                    <div class="card">
                        <div class="card-body p-0">
                            <img src="/media/informes/{{ url_data.img_descrip }}" alt="Aquí va la imagen" class="w-100 h-100 object-fit-cover blurred">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<style>
    .blurred {
        filter: blur(5px);
    }
</style>

<div id="informe_bi" style="display: none;">
    <iframe src="{{ url_data.url }}" frameborder="0"></iframe>
    <div id="bottom-bar"></div>
</div>
{% endif %}