{% extends "base.html" %}

{% block title %}Account Settings{% endblock %}

{% block body %}

<h1 class="ui header">
  <i class="settings icon"></i>
  Account Settings
</h1>
<h1 class="ui header">
  <span class="sub header"><code>editor_{{ current_user.editor_id }}</code></span></h1>
</h1>

<a href="/editor/{{ current_user.editor_id }}/editgroups">Edit History</a> -
<a href="/editor/{{ current_user.editor_id }}/annotations">Comments and Annotation History</a>

<br>

<div class="ui raised segments" style="max-width: 30em; margin-top: 2em; margin-bottom: 2em;">

<div class="ui segment">
<h4 class="ui header">Change Username</h4>
<form class="" role="change_username" action="/auth/change_username" method="post">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
  <div class="ui form">
    <div class="ui action input">
      <input type="text" name="username" value="{{ current_user.username }}" aria-label="account username">
      <button class="ui red button">Update</button>
    </div>
  </div>
</form>
</div>

<div class="ui segment">
<h4 class="ui header">Create API Token</h4>
<form class="" role="change_username" action="/auth/create_token" method="post">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
  <div class="ui form">
    <button class="ui green button" style="float: right;">Create Token</button>
    <div class="field" style="width: 20em; clear: unset;">
      <input type="text" name="duration_seconds" id="duration_seconds" aria-label="token valid duration (seconds)" placeholder="default 31 days">
      <label for="duration_seconds">Token Validity Duration (seconds; optional)</label>
    </div>
  </div>
</form>
</div>

</div>

<div class="ui info small message">
  <div class="header">
    In the future, you will be able to...
  </div>
  <ul>
    <li>Create and manage bot accounts
  </ul>
</div>
{% endblock %}