<table class="table">
    <tr>
        <td><div class="truncate autoexpand">${c.user.api_key}</div></td>
        <td>
            <span class="label label-success">${_('Built-in')}</span>
        </td>
        <td>${_('Expires')}: ${_('Never')}</td>
        <td>
            ${h.form(url('my_account_api_keys_delete'))}
                ${h.hidden('del_api_key',c.user.api_key)}
                ${h.hidden('del_api_key_builtin',1)}
                <button class="btn btn-danger btn-xs" type="submit"
                        onclick="return confirm('${_('Confirm to reset this API key: %s') % c.user.api_key}');">
                    ${_('Reset')}
                </button>
            ${h.end_form()}
        </td>
    </tr>
    %if c.user_api_keys:
        %for api_key in c.user_api_keys:
          <tr class="${'expired' if api_key.is_expired else ''}">
            <td><div class="truncate autoexpand">${api_key.api_key}</div></td>
            <td>${api_key.description}</td>
            <td>
                 %if api_key.expires == -1:
                  ${_('Expires')}: ${_('Never')}
                 %else:
                    %if api_key.is_expired:
                        ${_('Expired')}: ${h.age(h.time_to_datetime(api_key.expires))}
                    %else:
                        ${_('Expires')}: ${h.age(h.time_to_datetime(api_key.expires))}
                    %endif
                 %endif
            </td>
            <td>
                ${h.form(url('my_account_api_keys_delete'))}
                    ${h.hidden('del_api_key',api_key.api_key)}
                    <button class="btn btn-danger btn-xs" type="submit"
                            onclick="return confirm('${_('Confirm to remove this API key: %s') % api_key.api_key}');">
                        <i class="icon-trashcan"></i>
                        ${_('Remove')}
                    </button>
                ${h.end_form()}
            </td>
          </tr>
        %endfor
    %else:
    <tr><td><div class="ip">${_('No additional API keys specified')}</div></td></tr>
    %endif
</table>

<div>
    ${h.form(url('my_account_api_keys'), method='post')}
    <div class="form">
            <div class="form-group">
                <label class="control-label">${_('New API key')}</label>
            </div>
            <div class="form-group">
                <label class="control-label" for="description">${_('Description')}:</label>
                <div>
                    ${h.text('description', class_='form-control', placeholder=_('Description'))}
                </div>
            </div>
            <div class="form-group">
                <label class="control-label" for="lifetime">${_('Lifetime')}:</label>
                <div>
                    ${h.select('lifetime', '', c.lifetime_options)}
                </div>
            </div>
            <div class="form-group">
                <div class="buttons">
                    ${h.submit('save',_('Add'),class_="btn btn-default")}
                    ${h.reset('reset',_('Reset'),class_="btn btn-default")}
                </div>
            </div>
    </div>
    ${h.end_form()}
</div>

<div class="alert alert-warning">
<p>${_('''
API keys are used to let scripts or services access %s using your
account, as if you had provided the script or service with your actual
password.
''') % (c.site_name or 'Kallithea')}</p>
<p>${_('''
Like passwords, API keys should therefore never be shared with others,
nor passed to untrusted scripts or services. If such sharing should
happen anyway, reset the API key on this page to prevent further use.
''')}</p>
</div>

<script>
    'use strict';
    $(document).ready(function(){
        $("#lifetime").select2({
            'dropdownAutoWidth': true
        });
    });
</script>
