{% extends "base.html" %}
{% block title %}{{ tr('Доступ') }} — Puntavia{% endblock %}
{% block nav_team %}on{% endblock %}

{% block head %}
<style>
{# участники — плитками в одном блоке, как машины и люди: общий слой
   .machwrap, .devgrid/.devcard, .mach-tools, .iconbtn, dialog.modal #}
.xhint{margin:0 0 16px}
.xhint a{color:var(--accent)}
.role-pill,.scope-pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  font-size:11.5px;line-height:1.4;white-space:nowrap}
.role-pill.owner{background:var(--accent-soft);color:var(--accent)}
.role-pill.admin{background:var(--ok-soft);color:var(--ok)}
.role-pill.viewer{background:var(--hover);color:var(--muted)}
.scope-cell{display:flex;flex-wrap:wrap;gap:5px}
.scope-pill{background:var(--hover);color:var(--fg)}
.scope-pill.all{background:var(--accent-soft);color:var(--accent)}
.scope-pill.none{color:var(--muted);font-style:italic;background:transparent;padding-left:0}
/* приглашение, ждущее ответа, — та же плитка, но пунктиром: человека ещё нет */
.devcard.wait{border-style:dashed}
.devcard.wait .acts{display:flex;flex-wrap:wrap;gap:8px}
.devcard.wait .acts form{margin:0}
.deps{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.deps label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.deps input{accent-color:var(--accent)}
.link-box{margin:0 0 16px;padding:12px 14px;border:1px solid var(--accent);
  border-radius:var(--r-card);font-size:12.5px;word-break:break-all;
  background:var(--accent-soft)}
/* журнал входов: те же пять колонок, что и в служебном журнале, чтобы строка
   читалась одинаково в обоих местах */
.list .lg{grid-template-columns:110px 130px 1fr 130px 120px}
.list .lg.bad .v:nth-child(2){color:var(--warn)}
@media (max-width:900px){.list .lg{grid-template-columns:1fr}}
</style>
{% endblock %}

{% block crumb %}<span class="crumb"><span class="sep">/</span><span class="cr-here">{{ tr('Доступ') }}</span><span class="cr-note">{{ tr('людей с доступом') }} {{ members|length }}</span></span>{% endblock %}

{% block content %}
{% from "_ava.html" import ava with context %}
<div class="pagetabs">{% with tab = 'users' %}{% include "_tabs_team.html" %}{% endwith %}</div>
<div class="pagewrap">
{# перекрёстная подсказка: «Доступ» и «Сотрудники» легко спутать — с первого
   взгляда должно быть ясно, кто здесь #}
<p class="sub xhint">{{ tr('Кто заходит в кабинет смотреть отчёты.') }}
  {{ tr('За кем закреплены машины —') }} <a href="/team">{{ tr('на вкладке «Сотрудники»') }}</a>.</p>
{% if error %}<div class="note err">{{ error }}</div>{% endif %}
{% if link %}
<div class="link-box">
  {{ tr('Приглашение создано, письмо отправлено. Если оно не дойдёт — вот та же ссылка, её можно передать самому:') }}<br>
  <span data-invite-link>{{ link }}</span>
</div>
{% endif %}

<div class="card machwrap">
  <div class="card-h wsum">{{ tr('Участники') }}<span class="cnt">{{ members|length }}</span>
    <span class="mach-tools">
      <button class="iconbtn" type="button" title="{{ tr('Пригласить') }}"
              aria-label="{{ tr('Пригласить') }}"
              onclick="document.getElementById('inviteModal').showModal()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M12 5.2v13.6M5.2 12h13.6"/></svg>
      </button>
    </span>
  </div>

  <div class="devgrid">
    {% for m in members %}
    {% set deps = scope_of(m) %}
    <div class="devcard">
      <div>
        <div class="devcard-h">{{ ava(m.name or m.email, m.avatar, 24) }}<span class="nm-a">{{ m.name or m.email }}</span></div>
        {% if m.name %}<div class="plat">{{ m.email }}</div>{% endif %}
      </div>
      <div class="devfields">
        <div class="devfield">
          <div class="k">{{ tr('роль') }}</div>
          <div class="v"><span class="role-pill {{ m.role }}">{{ tr(role_names[m.role]) }}</span></div>
        </div>
        <div class="devfield">
          <div class="k">{{ tr('охват') }}</div>
          <div class="v scope-cell">
            {%- if deps is none -%}<span class="scope-pill all">{{ tr('вся компания') }}</span>
            {%- elif not deps -%}<span class="scope-pill none">{{ tr('ничего не выдано') }}</span>
            {%- else -%}
              {% for d in departments if d.id in deps %}<span class="scope-pill">{{ d.name }}</span>{% endfor %}
            {%- endif -%}
          </div>
        </div>
      </div>
      {% if m.role != 'owner' and m.user_id != my_id %}
      <details class="edit">
        <summary>{{ tr('Изменить доступ') }}</summary>
        <div class="edit-body">
          <form class="formrow" method="post">
            <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
            <input type="hidden" name="action" value="update">
            <input type="hidden" name="user_id" value="{{ m.user_id }}">
            <div class="field"><label>{{ tr('Роль') }}</label>
              <select class="sel sm" name="role">
                {% for r in roles %}
                <option value="{{ r }}" {{ 'selected' if r == m.role }}>{{ tr(role_names[r]) }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="field"><label>{{ tr('Охват') }}</label>
              <select class="sel sm" name="scope">
                <option value="all" {{ 'selected' if deps is none }}>{{ tr('вся компания') }}</option>
                <option value="departments" {{ 'selected' if deps is not none }}>{{ tr('группы') }}</option>
              </select>
            </div>
            <button class="btn out sm" type="submit">{{ tr('Сохранить') }}</button>
            {% if departments %}
            <div class="deps" style="flex:1 1 100%">
              {% for d in departments %}
              <label><input type="checkbox" name="departments" value="{{ d.id }}"
                            {{ 'checked' if deps and d.id in deps }}> {{ d.name }}</label>
              {% endfor %}
            </div>
            {% endif %}
          </form>
          <form method="post" style="margin:12px 0 0"
                onsubmit='return confirm({{ tr("Убрать {email} из компании?").format(email=m.email)|tojson }})'>
            <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
            <input type="hidden" name="action" value="remove">
            <input type="hidden" name="user_id" value="{{ m.user_id }}">
            <button class="btn out sm" type="submit">{{ tr('Убрать из компании') }}</button>
          </form>
        </div>
      </details>
      {% else %}
      <div><span class="tag">{{ tr('это вы') if m.user_id == my_id else tr('владелец') }}</span></div>
      {% endif %}
    </div>
    {% endfor %}

    {# приглашённые, но ещё не вошедшие — пунктирными плитками в той же сетке #}
    {% for i in invites %}
    <div class="devcard wait">
      <div>
        <div class="devcard-h"><span class="nm-a">{{ i.email }}</span>
          <span class="tag">{{ tr('ждёт ответа') }}</span></div>
      </div>
      <div class="devfields">
        <div class="devfield">
          <div class="k">{{ tr('роль') }}</div>
          <div class="v"><span class="role-pill {{ i.role }}">{{ tr(role_names[i.role]) }}</span></div>
        </div>
      </div>
      {# письмо могло не дойти: ссылку и повторную отправку держим под рукой #}
      <div class="acts">
        <button class="btn out sm" type="button" data-copy="{{ invite_base }}{{ i.token }}">{{ tr('Скопировать ссылку') }}</button>
        <form method="post">
          <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
          <input type="hidden" name="action" value="resend_invite">
          <input type="hidden" name="token" value="{{ i.token }}">
          <button class="btn out sm" type="submit">{{ tr('Отправить письмо ещё раз') }}</button>
        </form>
        <form method="post">
          <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
          <input type="hidden" name="action" value="revoke_invite">
          <input type="hidden" name="token" value="{{ i.token }}">
          <button class="btn out sm" type="submit">{{ tr('Отозвать') }}</button>
        </form>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

{# Журнал входов — под участниками, во всю ширину: строк много, колонки узкие.
   Показываем только своих: чужие компании и наша служебная кухня сюда не
   попадают (orgs.login_events фильтрует по компании). #}
<div class="card" style="margin-top:18px">
  <div class="card-h">{{ tr('Кто заходил в кабинет') }}<span class="muted">
    &nbsp;· {{ tr('за последние 90 дней') }}</span></div>
  <p class="sub" style="margin:0 0 12px">{{ tr('Отмечается ввод пароля. Открытие по сохранённой сессии входом не считается.') }}</p>
  {% if not logins %}
  <div class="empty in-card">{{ tr('Пока никто не вводил пароль — все на сохранённых сессиях.') }}</div>
  {% else %}
  <ul class="list">
    {% for e in logins %}
    <li class="lg{{ ' bad' if e.kind == 'login_fail' }}">
      <div class="v muted">{{ when(e.ts) }}</div>
      <div class="v">{{ tr(login_kinds.get(e.kind, e.kind)) }}</div>
      <div class="v">{{ e.user_email or e.note or '' }}</div>
      <div class="v muted">{{ e.ua or '' }}</div>
      <div class="v muted">{{ e.ip or '' }}</div>
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</div>

<script>
(function () {
  // Копирование ссылки приглашения. Без https буфера нет — тогда показываем
  // саму ссылку рядом, чтобы её можно было выделить руками.
  document.querySelectorAll('[data-copy]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var text = btn.getAttribute('data-copy');
      var done = function () { btn.textContent = {{ tr('Скопировано')|tojson }}; };
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(text).then(done, show);
      } else { show(); }
      function show() {
        if (btn.nextElementSibling && btn.nextElementSibling.dataset.shown) return;
        var box = document.createElement('input');
        box.className = 'inp sm'; box.readOnly = true; box.value = text;
        box.dataset.shown = '1'; box.style.flex = '1 1 100%';
        btn.parentNode.insertBefore(box, btn.nextSibling);
        box.focus(); box.select();
      }
    });
  });
})();
</script>

<dialog id="inviteModal" class="modal">
  <div class="card-h wsum" style="margin-bottom:10px">{{ tr('Пригласить') }}
    <button class="btn out sm" type="button"
            onclick="this.closest('dialog').close()">✕</button></div>
  <form method="post">
    <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
    <input type="hidden" name="action" value="invite">
    <div class="formrow">
      <div class="field" style="flex:1 1 100%">
        <label for="ie">{{ tr('Почта') }}</label>
        <input class="inp sm" id="ie" type="email" name="email" required>
      </div>
      <div class="field">
        <label for="ir">{{ tr('Роль') }}</label>
        <select class="sel sm" id="ir" name="role">
          {% for r in roles %}<option value="{{ r }}">{{ tr(role_names[r]) }}</option>{% endfor %}
        </select>
      </div>
      <div class="field">
        <label for="is">{{ tr('Охват') }}</label>
        <select class="sel sm" id="is" name="scope">
          <option value="all">{{ tr('вся компания') }}</option>
          <option value="departments">{{ tr('только группы') }}</option>
        </select>
      </div>
      <button class="btn sm" type="submit">{{ tr('Пригласить') }}</button>
    </div>
    {% if departments %}
    <div class="deps">
      {% for d in departments %}
      <label><input type="checkbox" name="departments" value="{{ d.id }}"> {{ d.name }}</label>
      {% endfor %}
    </div>
    {% else %}
    <p class="sub" style="margin-top:10px">{{ tr('Групп нет, поэтому охват пока только «вся компания».') }}
      <a href="/devices">{{ tr('Завести группы →') }}</a></p>
    {% endif %}
  </form>
</dialog>
</div>
{% endblock %}