{% load static i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DDL: {% block page_title %}Title{% endblock %}</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'ddm/css/ddm-base.css' %}">
  <link rel="stylesheet" href="{% static 'ddm/css/research-interface-base.css' %}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
  {% block extrahead %}{% endblock %}
</head>

<body class="research-interface">

{% block header %}
  <div class="ddm-header">
    <div class="container fs-6 fw-light">
    {% include "ddm/project_admin/components/header.html" %}
    </div>
  </div>
{% endblock %}

<div class="ddm-breadcrumbs container mt-3 mb-3 fw-light">
  {% block breadcrumbs %}
  {% endblock %}
</div>

<div class="ddm-message-container container">
  {% if messages %}
  {% for message in messages %}
  <div id="message-{{ forloop.counter }}" class="ddm-message d-flex justify-content-between space-between {% if message.tags %} {{ message.tags }}{% endif %}">
    <div>{{ message }}</div>
    <div><a class="ddm-message-close" href="#" onclick="closeMessage('message-{{ forloop.counter }}');">&#128941;</a></div>
  </div>
  {% endfor %}
  {% endif %}
</div>

<div class="ddm-main container mt-4">
  <h1>{% block main_heading %}{% endblock %}</h1>

  <div>
    {% block main_body %}{% endblock %}
  </div>
</div>

{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="{% static 'ddm/js/project-admin-base.js' %}"></script>
{% endblock %}

</body>

</html>
