<!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/slovenscina-admin.css" type="text/css">
    <link rel="stylesheet" href="../static/css/manage-institution.css" type="text/css">


</head>
<body>
<header>
    <div class="logo"><a href="../"><img src="../static/image/logo-white.svg"/></a></div>
    <div class="dropdown">
        <button class="dropbtn"><img src="/static/image/menu.svg"/></button>
        <div class="dropdown-content">
            <a href="../oddaja">Oddaja</a>
            <a href="../zgodovina">Zgodovina</a>
            <a href="../pogodbe">Ekipa</a>
            {% if is_institution_coordinator %}
            <hr/>
            <a href="../manage-institution">Upravljaj z institucijo</a>
            {% endif %}
            {% if is_admin %}
            <hr/>
            <a href="../admin">Administracijski meni</a>
            {% endif %}
            <hr/>
            <a href="https://slovenscina.eu/" target="_blank">Več informacij</a>
            <hr/>
            <a href="../logout">Odjava</a>
        </div>
    </div>
</header>
<div class="container" style="margin-top:8rem;">
    {% with messages = get_flashed_messages() %}
    {% if messages %}
        <div>
            {{ messages[0] }}
        </div>
    {% endif %}
    {% endwith %}

    <h1>{{institution.name}}</h1>
    <h3>Seznam uporabnikov v vaši instituciji</h3>
      <table class="tableFixHead">
          <thead>
              <tr>
                <th>Ime in priimek</th>
                <th>Email</th>
                <th>Vloga</th>
                <th>Akcije</th>
              </tr>
          </thead>
          <tbody>
          {% for item in institution_users %}
          <tr>
              <td>{{item.name}}</td>
              <td>{{item.email}}</td>
              <td>
                  <div>
                      <a href="javascript:void(0);" onclick="toggleEditForm(this)" class="toggle-edit-role">Spremeni</a>
                      {{role_map[item.id]}}
                  </div>
                  <form action="../changeuserrole-institution" method="post" style="display:none;">
                      <input type="hidden" id="user-id" name="user-id" value="{{item.id}}"/>
                      <select class="role" name="role">
                            <option value="coordinator">Koordinator/-ka</option>
                            <option value="mentor">Mentor/-ica</option>
                            <option value="other">Druga vloga</option>
                      </select>
                      <input type="submit" value="Shrani"/>
                  </form>
              </td>
              <td>
                  <form action="../deluserfrominstitution" method="post">
                      <input type="hidden" id="user_id" name="user_id" value="{{item.id}}">
                      <input type="submit" value="Odstrani uporabnika">
                  </form>
              </td>
          </tr>
          {% endfor %}
      </table>
    </div>
    <br>

</div>
</body>
<script>
    var toggleEditForm = function(el) {
        var td = el.closest("td");
        el.closest("div").style.display = "none";
        td.querySelector("form").style.display = "block";
    };



</script>
</html>