<!DOCTYPE html>
<html lang="{{ metaLanguage }}">
<head>
  <meta charset="UTF-8">
  <title>phpMyFAQ Media Browser</title>
  <style>
    @import url('../assets/dist/admin.css');
    body { padding: 10px; }
  </style>
</head>
<body>

{% if notAuthenticated %}
  <div class="alert alert-danger" role="alert">
    xxx{{ msgNotAuthenticated }}
  </div>
{% else %}
  <form action="" method="post">
    <div class="input-group mb-3">
      <input type="search" class="form-control" placeholder="{{ msgMediaSearch }}"
             id="filter" value="" aria-label="search" aria-describedby="search">
      <span class="input-group-text" id="search"><i aria-hidden="true" class="bi bi-search"></i></span>
    </div>
  </form>

{% if isImageDirectoryMissing %}
<div class="alert alert-danger" role="alert">
  {{ msgImageDirectoryMissing }}
</div>
{% endif %}

  {% for image in images %}
  <div class="mce-file" data-src="{{ image }}">
    <img src="{{ image }}" class="mce-file-preview" alt="{{ image }}">{{ image }}
  </div>
  {% endfor %}

  <script src="../assets/dist/backend.js"></script>
{% endif %}

</body>
</html>
