{% extends "admin/change_list.html" %}
{% load static %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    #header,
    .breadcrumbs,
    .object-tools,
    #content-main > .module h2,
    #content-main > h1 {
      display: none;
    }

    body {
      overflow: hidden;
    }

    #content {
      margin: 0;
      padding: 0;
    }

    #content-main {
      margin-left: 0;
      padding: 0;
    }

    #nav-sidebar,
    #toggle-nav-sidebar {
      display: none !important;
    }

    #main > #nav-sidebar + .content,
    #main > div.content {
      max-width: 100% !important;
      width: 100% !important;
    }

    .verifier-frame {
      border: none;
      width: 100%;
      height: 100vh;
    }
  </style>
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <script>
    window.addEventListener('DOMContentLoaded', function () {
      const navSidebar = document.getElementById('nav-sidebar');
      const toggleButton = document.getElementById('toggle-nav-sidebar');
      const contentWrapper = document.querySelector('#content');
      const mainWrapper = document.getElementById('main');

      if (contentWrapper) {
        contentWrapper.style.padding = '0';
      }

      if (navSidebar) {
        navSidebar.classList.add('collapsed');
      }

      if (toggleButton) {
        toggleButton.style.display = 'none';
      }

      if (mainWrapper && mainWrapper.classList.contains('shifted')) {
        mainWrapper.classList.remove('shifted');
      }
    });
  </script>
{% endblock %}

{% block object-tools %}{% endblock %}

{% block content_title %}{% endblock %}

{% block content %}
  <div class="module">
    <div class="verifier-wrapper">
      <iframe class="verifier-frame" src="{% url 'admin:verificator_ui_verifier_embed' %}"></iframe>
    </div>
  </div>
{% endblock %}