<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upravljanje institucije - Šolar</title>
    <link rel="stylesheet" href="/static/css/header.css" type="text/css">
    <link rel="stylesheet" href="/static/css/form.css" type="text/css">
    <link rel="stylesheet" href="/static/css/simple-grid.css" type="text/css">
    <link rel="stylesheet" href="/static/css/manage-institution.css" type="text/css">
    <style>
          .tableFixHead {
            overflow-y: scroll;
            max-height: 306px;
          }
          .tableFixHead thead th {
            position: sticky;
            top: 0;
          }
          table {
            border-collapse: collapse;
            width: 100%;
          }
          th,
          td {
            padding: 8px 16px;
            border: 1px solid #ccc;
          }
          th {
            background: #eee;
          }
          h2 {
            color: blue;
          }
    </style>
</head>
<body>
<header>
    <div class="logo"><a href="/"><img src="/static/image/logo-white.svg"/></a></div>
    <div class="menu-items">
        <a href="../logout">Odjava</a>
        {% if is_institution_coordinator %}
        <a href="../manage-institution">Upravljaj z institucijo</a>
        {% endif %}
        {% if is_admin %}
        <a href="../admin">Administracijski meni</a>
        {% endif %}
        <a href="../oddaja">Oddaja</a>
        <a href="mailto:email@example.com">Pomoč</a>
    </div>
</header>
<div class="container" style="margin-top:8rem;">
    <a href="../oddaja">Nazaj na oddajo</a>
    {% with messages = get_flashed_messages() %}
    {% if messages %}
        <div style="background: blue;">
            {{ messages[0] }}
        </div>
    {% endif %}
    {% endwith %}
    <h3>Seznam vseh aktivnih uporabnikov</h3>
    <div class="tableFixHead">
      <table>
          <thead>
              <tr>
                <th>ID</th>
                <th>Ime in priimek</th>
                <th>Email</th>
              </tr>
          </thead>
          <tbody>
          {% for item in users %}
          <tr>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.email}}</td>
          </tr>
          {% endfor %}
      </table>
    </div>

    <h3>Seznam uporabnikov v vaši instituciji</h3>
    <div class="tableFixHead">
      <table>
          <thead>
              <tr>
                <th>ID</th>
                <th>Ime in priimek</th>
                <th>Email</th>
              </tr>
          </thead>
          <tbody>
          {% for item in institution_users %}
          <tr>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.email}}</td>
          </tr>
          {% endfor %}
      </table>
    </div>
    <br>
    <h3>Dodaj uporabnika instituciji</h3>
    <form action="../addusertoinstitution" method="post">
        <label for="user_id">ID uporabnika:</label>
        <input type="text" id="user_id" name="user_id"><br>
        <label for="role">Vloga v instituciji:</label>
        <select name="role" id="role">
                <option value="coordinator">Koordinator/-ka</option>
                <option value="mentor">Mentor/-ica</option>
                <option value="other">Druga vloga</option>
        </select>
        <input type="submit" value="Dodeli">
    </form>
    <h3>Odstrani uporabnika iz institucije</h3>
    <form action="../deluserfrominstitution" method="post">
        <label for="user_id">ID uporabnika:</label>
        <input type="text" id="user_id" name="user_id"><br>
        <input type="submit" value="Odstrani">
    </form>
    <div> </div>
</div>
</body>