[% USE date %]
[% WRAPPER _user_profile_frame.tt
   tab = 'apikeys'
%]

  [% IF new_private_key %]
    <div id="new_key_alert" class="card green alert top-center">
      <div class="head justify-between">
        <h3>New API Key Created</h3>
        <div class="w-5">
          <button class="iconOnly medium" title="close this message" onclick="fade('new_key_alert', 500, true);return false;"><i class="uil uil-times"></i></button>
        </div>
      </div>
      <div class="body">
        Store this key to a safe place, it won't be shown again.
        <div class="flexrow flex-nowrap gap-x-2 py-2">
          <span class="font-semibold" id="private_key">[%- new_private_key -%]</span>
          <button class="iconOnly px-1 copy_button" onclick="copyCode(event, 'private_key'); return false;"><i class="uil uil-copy" title="Copy key to clipboard"></i></button>
        </div>
        <button class="mx-auto" title="close this message" onclick="fade('new_key_alert', 500, true);return false;">dismiss</button>
      </div>
    </div>
  [% END %]

  <div class="body max-w-[900px] w-[900px]">
      [% list_api_keys = 0 %]
      [% IF !c.config.api_keys_enabled %]
        <span class="textHINT">API keys have to be enabled in the thruk_local.conf via <i>api_keys_enabled=1</i></span>
      [% ELSIF c.check_user_roles("authorized_for_read_only") %]
        <span class="textHINT">Read-Only sessions cannot create API keys.</span>
      [% ELSE %]
        [% list_api_keys = 1 %]
        [% IF c.config.max_api_keys_per_user == 0 %]
          <span class="textHINT">New API keys cannot be created, because <i>max_api_keys_per_user</i> is set to 0</span>
        [% ELSE %]
        <form action="user.cgi" method="POST">
          <input type="hidden" name="action" value="create">
          <input type="hidden" name="CSRFtoken" value="[% get_user_token(c) %]">
          <div class="flexrow gap-1">
            <input type="text" name="comment" value="" placeholder="comment" class="grow">
            <button class="w-44 green" onclick="setBtnSpinner(this);"><i class="uil uil-save"></i>Save New API Key</button>
          </div>
          <div class="pt-1 flex gap-1 min-h-[32px] items-center">
            <input type="checkbox" id="superuser" name="superuser" value="1"[% IF !c.check_user_roles("admin") %] disabled [% END %] onchange="if(this.checked) { showElement('force_user'); } else { hideElement('force_user'); } ">
            <label for="superuser" title="Enable to create a global shared api key, which is not bound to this user." class="font-semibold clickable hoverable [% IF !c.check_user_roles("admin") %]disabled[% END %]">Superuser Key</label>
            <a class="link ml-5" href="https://thruk.org/documentation/rest.html#api-key" target="_blank">(<i class="uil uil-external-link-alt"></i> read more about superuser keys)</a>
            <input id="force_user" type="text" name="force_user" value="" placeholder="force user name" class="ml-5 w-56" style="display: none;">
          </div>

          <div class="pt-1">
            <div class="flexrow flex-nowrap gap-1 mb-2">
              <input type="hidden" name="restrict_only" value="1">
              <input type="checkbox" id="restrict" name="restrict" value="1" onchange="if(this.checked) { jQuery('.js-restricted_roles').show(); } else { jQuery('.js-restricted_roles').hide(); } ">
              <label for="restrict" title="Enable to select roles. Otherwise this API key will get the same roles as the user itself." class="font-semibold clickable hoverable">Select Roles</label>
            </div>
            <div style="display: none;" class="flexrow flex-nowrap gap-x-2 mb-2 items-center js-restricted_roles">
              <span class="ml-5">Quick:</span>
              <div class="buttongroup">
                <button class="min-w-[70px]" onclick="setRoles(''); return false;">None</button>
                <button class="min-w-[70px]" onclick="setRoles('*'); return false;">All</button>
                <button class="min-w-[70px]" onclick="setRoles('authorized_for_read_only'); return false;">Read-Only</button>
                <button class="min-w-[70px]" onclick="setRoles('authorized_for_admin'); return false;"[% IF !c.user.can_choose_role('admin') %] disabled[% END %]>Admin</button>
                <button class="min-w-[70px]" onclick="setRoles('authorized_for_all_host_commands,authorized_for_all_hosts,authorized_for_all_service_commands,authorized_for_all_services'); return false;">All-Commands</button>
                <button class="min-w-[70px]" onclick="setRoles('authorized_for_all_hosts,authorized_for_all_services,authorized_for_read_only'); return false;">All-Read-Only</button>
              </div>
            </div>

            <div style="display: none;" class="flexcol gap-px js-restricted_roles">
              [% FOREACH r = available_roles %]
              <div>
                <input type="checkbox" id="role.[% r | html %]" name="roles" value="[% r | html %]"[% IF !c.user.can_choose_role(r) %] disabled[% END %][% IF c.check_user_roles(r) && c.user.can_choose_role(r) %] checked[% END %]>
                <label for="role.[% r | html %]"[% IF !c.user.can_choose_role(r) %] class="disabled"[% ELSE %] class="clickable hoverable"[% END %]>[% r | html %]</label><br>
              </div>
              [% END %]
            </div>
          </div>
        </form>
        [% END %]
      [% END %]
  </div>

  [% IF list_api_keys  && (api_keys.size > 0 || superuser_keys.size > 0) %]
    <div class="head ">
      <h3>API Keys</h3>
    </div>
    <div class="overflow-auto w-full">
      <table class="innercellborder w-full">
        <tr>
          <th class="text-center">Superuser</th>
          <th>Role Restriction</th>
          <th>Force User</th>
          <th>Comment</th>
          <th>Created At</th>
          <th>Last Used</th>
          <th class="text-center">Actions</th>
        </tr>
        [% BLOCK key_block %]
        <tr class="hoverable">
          <td class="align-top text-center">
            [% IF key.exists('superuser') && key.superuser %]
              <i class="uil uil-check" title="superuser key"></i>
            [% ELSE %]
              <i class="uil uil-square-full" title="user key"></i>
            [% END %]
          </td>
          <td class="align-top truncate max-w-[300px]">[% IF key.exists('roles') %]
                [% IF contains(key.roles, 'authorized_for_admin') %]
                  &lt;admin&gt;
                [% ELSE %]
                  [% key.roles.join(',<br>') %]
                [% END %]
              [% ELSE %]
                &lt;no restriction&gt;
              [% END %]
          </td>
          <td class="align-top">[% IF key.exists('force_user') %][% key.force_user %][% ELSE %][% END %]</td>
          <td class="align-top truncate max-w-[300px]">[% IF key.exists('comment') %][% key.comment | html %][% END %]</td>
          <td class="align-top">[% IF key.exists('created') %][% date_format(c, key.created) %][% ELSE %]unknown[% END %]</td>
          <td class="align-top">[% IF key.exists('last_used') %][% date_format(c, key.last_used) %] ([% IF key.exists('last_from') %][% key.last_from | html %][% END %])[% ELSE %]never[% END %]</td>
          <td class="align-top text-center">
            <a href="user.cgi?file=[% basename(key.file) | uri %]&amp;action=remove_key" onClick="if(confirm('Really remove?')) { setBtnSpinner(this); return true; } else { return false; }" title="delete this api key">
              <i class="fa-solid fa-trash text-base"></i>
            </a>
          </td>
        </tr>
        [% END %]
        [% FOREACH key = superuser_keys %]
          [% PROCESS key_block %]
        [% END %]
        [% IF api_keys.size > 0 && superuser_keys.size > 0 %]
        <tr>
          <td colspan="5" class="h-5"></td>
        </tr>
        [% END %]
        [% FOREACH key = api_keys %]
          [% PROCESS key_block %]
        [% END %]
      </table>
    </div>
  [% END %]

[% END %]
