<template name="accountTokens">
	<section class="preferences-page preferences-page--new">
		{{> header sectionName="Personal_Access_Tokens" hideHelp=true fullpage=true}}
		<div class="preferences-page__content">
			{{# if isAllowed}}
			<h2>{{_ "API_Personal_Access_Tokens_To_REST_API"}}</h2>
			<br>
			<form id="form-tokens" class="">

				<div class="rc-form-group rc-form-group--inline">
					<!-- <input id="input-token-name"
					type="text"
					name="tokenName"
					placeholder={{_ "Enter_a_name"}}
					value="{{tokenName}}"> -->
					<div class="rc-input rc-input--small rc-directory-search rc-form-item-inline">
						<label class="rc-input__label">
							<div class="rc-input__wrapper">
								<input type="text" class="rc-input__element rc-input__element--small js-search" name="tokenName" id="tokenName"
								 placeholder={{_ "API_Add_Personal_Access_Token"}} autocomplete="off">
							</div>
						</label>
					</div>
					<button name="add" class="rc-button rc-button--primary rc-form-item-inline save-token">{{_ "Add"}}</button>
				</div>
			</form>
			<br>
			<div class="rc-table-content">
				{{#table}}
				<thead>
					<tr>
						<th width="30%">
							<div class="table-fake-th">{{_ "API_Personal_Access_Token_Name"}}</div>
						</th>
						<th>
							<div class="table-fake-th">{{_ "Created_at"}}</div>
						</th>
						<th>
							<div class="table-fake-th">{{_ "Last_token_part"}}</div>
						</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					{{#each tokens}}
					<tr data-id="{{name}}">
						<td>
							<div class="rc-table-title">
								{{name}}
							</div>
						</td>
						<td>{{dateFormated createdAt}}</td>
						<td>...{{lastTokenPart}}</td>
						<td><button class="regenerate-personal-access-token"><i class="icon-ccw"></i></button></td>
						<td><button class="remove-personal-access-token"><i class="icon-block"></i></button></td>
					</tr>
					{{else}}
					<tr>
						<td colspan="4">{{_ "There_are_no_personal_access_tokens_created_yet"}}</td>
					</tr>
					{{/each}}
				</tbody>
				{{/table}}
			</div>
			{{/if}}
		</div>
	</section>
</template>
