{% extends "tungsten/layout/app.html" %}
{% import "tungsten/components/ui.html" as ui %}
{% block content %}
{% set subheading = 'Tokens let other apps and scripts use the API as you. Treat them like passwords.' %}
{% set breadcrumbs = [(__('Profile'), panel.url('profile')), (__('API tokens'), None)] %}
{% include "tungsten/components/page-header.html" %}
<div class="grid max-w-3xl gap-6">
  {% if error %}<div class="rounded-lg bg-danger-50 px-4 py-3 text-sm text-danger-700 ring-1 ring-danger-600/20 dark:bg-danger-500/10 dark:text-danger-300">{{ __(error) }}</div>{% endif %}

  {% if plain %}
  <div class="rounded-xl bg-warning-50 p-4 ring-1 ring-warning-600/20 dark:bg-warning-500/10" x-data="{ copied: false }">
    <p class="text-sm font-semibold text-warning-800 dark:text-warning-300">{{ __('Copy your new token') }}</p>
    <p class="mt-1 text-sm text-warning-700 dark:text-warning-300/80">{{ __("It won't be shown again. Send it as: Authorization: Bearer <token>") }}</p>
    <div class="mt-3 flex flex-wrap items-center gap-3">
      <code class="flex-1 break-all rounded-md bg-white px-3 py-2 font-mono text-sm text-gray-950 ring-1 ring-gray-950/10 dark:bg-white/5 dark:text-white dark:ring-white/10" data-tw-token>{{ plain }}</code>
      <button type="button" class="{{ ui.button_classes('gray') }}" @click="navigator.clipboard.writeText($root.querySelector('[data-tw-token]').textContent); copied = true">
        {{ icon('copy', 'h-4 w-4') }}<span x-show="!copied">{{ __('Copy') }}</span><span x-show="copied" x-cloak>{{ __('Copied') }}</span>
      </button>
    </div>
  </div>
  {% endif %}

  {% call ui.card(heading=__('Create a token'), icon_name='key-round') %}
  <form method="post" class="grid gap-4">
    <input type="hidden" name="_token" value="{{ csrf_token }}"><input type="hidden" name="_do" value="create">
    <div class="grid gap-4 sm:grid-cols-2">
      <label class="grid gap-1.5"><span class="tw-label">{{ __('Name') }}</span>
        <input name="name" required maxlength="100" class="tw-input" placeholder="{{ __('e.g. Reports script') }}"></label>
      <label class="grid gap-1.5"><span class="tw-label">{{ __('Expires') }}</span>
        <select name="expires" class="tw-input">
          {% for days, label in [(7, '7 days'), (30, '30 days'), (90, '90 days'), (365, '1 year'), (0, 'Never')] %}
          <option value="{{ days }}" {% if (default_days or 0) == days %}selected{% endif %}>{{ __(label) }}</option>
          {% endfor %}
        </select></label>
    </div>
    {% if options %}
    <fieldset class="grid gap-2">
      <legend class="tw-label mb-1">{{ __('What can it do?') }}</legend>
      <div class="grid gap-2 sm:grid-cols-2">
        {% for value, label in options.items() %}
        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300"><input type="checkbox" name="abilities" value="{{ value }}" class="tw-checkbox">{{ __(label) }}</label>
        {% endfor %}
      </div>
    </fieldset>
    {% endif %}
    <div><button class="{{ ui.button_classes('primary') }}">{{ icon('plus', 'h-4 w-4') }}<span>{{ __('Create token') }}</span></button></div>
  </form>
  {% endcall %}

  {% call ui.card(heading=__('Your tokens')) %}
  {% if tokens %}
  <ul class="divide-y divide-gray-100 dark:divide-white/10">
    {% for t in tokens %}
    <li class="flex flex-wrap items-center gap-4 py-3">
      <div class="min-w-0 flex-1">
        <p class="font-medium text-gray-950 dark:text-white">{{ t.name }}</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">
          {{ __('Created :date', date=t.created_at.strftime('%d %b %Y')) }}
          · {% if t.last_used_at %}{{ __('Last used :date', date=t.last_used_at.strftime('%d %b %Y %H:%M')) }}{% else %}{{ __('Never used') }}{% endif %}
          · {% if not t.expires_at %}{{ __('Never expires') }}{% elif t.expires_at <= now %}<span class="text-danger-600 dark:text-danger-400">{{ __('Expired') }}</span>{% else %}{{ __('Expires :date', date=t.expires_at.strftime('%d %b %Y')) }}{% endif %}
        </p>
        {% if options %}<div class="mt-1.5 flex flex-wrap gap-1">{% for a in t.abilities or [] %}{{ ui.badge(options.get(a, a) if a != '*' else __('Everything'), 'gray') }}{% endfor %}</div>{% endif %}
      </div>
      <form method="post">
        <input type="hidden" name="_token" value="{{ csrf_token }}"><input type="hidden" name="_do" value="revoke"><input type="hidden" name="id" value="{{ t.id }}">
        <button class="{{ ui.button_classes('danger', outlined=true) }}" data-confirm="{{ __('Delete this token? Apps using it will stop working.') }}" onclick="return confirm(this.dataset.confirm)">{{ __('Delete') }}</button>
      </form>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('No tokens yet.') }}</p>
  {% endif %}
  {% endcall %}
</div>
{% endblock %}