{{>header}}
{{>top_menu}}

<data hidden id="page" value="add-edit-item">
<div class="mw7 mw6-ns center pv3 ph4 ph3-ns">
  <h2 class="f3 fw6">{{title}}</h2>
  <div id="item-type" class="mv3"></div>
  <div id="item-form-placeholder"></div>
</div>
</data>

<template id="template-form-card">
<form id="item-form" method="POST">
  <label class="db f6 fw6 mv3">Name*
    <input id="item-name" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" required />
  </label>
  <label class="db f6 fw6 mv3">Category*
    <input id="item-category" list="category-list" class="input-reset db border-box f5 mt1 w-100 pa1 ba br1 b--black-30" required />
    <datalist id="item-category-list"></datalist>
  </label>
  <label class="db f6 fw6 mv3">Note
    <textarea id="item-note" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30"></textarea>
  </label>
  <label class="db f6 fw6 mv3">Card Number
    <input id="item-cardNumber" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" autocomplete="off" />
  </label>
  <label class="db f6 fw6 mv3">Cardholder Name
    <input id="item-cardholderName" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" autocomplete="off" />
  </label>
  <label class="db f6 fw6 mv3">Expiry Date
    <input id="item-expiryDate" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" autocomplete="off" />
  </label>
  <label class="db f6 fw6 mv3">Security Code
    <input id="item-securityCode" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" autocomplete="off" />
  </label>
  <label class="db f6 fw6 mv3">PIN Code
    <input id="item-pinCode" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" autocomplete="off" />
  </label>
  <div class="db tc mv3">
    <input type="hidden" name="name" id="name"/>
    <input type="hidden" name="category" id="category"/>
    <input type="hidden" name="content" id="content"/>
    <input type="hidden" name="item_key" id="item_key"/>
    <input type="hidden" name="csrf_token" value="{{csrf_token}}" />
    <input type="submit" class="f5 fw6 bg-green hover-bg-dark-green bg-animate white active-inverse pointer br1 bn ph4 pv2" value="Save" />
  </div>
</form>
</template>
<template id="template-form-login">
<form id="item-form" method="POST">
  <label class="db f6 fw6 mv3">Name*
    <input id="item-name" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" required />
  </label>
  <label class="db f6 fw6 mv3">Category*
    <input id="item-category" list="category-list" class="input-reset db border-box f5 mt1 w-100 pa1 ba br1 b--black-30" required />
    <datalist id="item-category-list"></datalist>
  </label>
  <label class="db f6 fw6 mv3">Note
    <textarea id="item-note" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30"></textarea>
  </label>
  <label class="db f6 fw6 mv3">Address
    <input id="item-address" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" autocomplete="off" />
  </label>
  <label class="db f6 fw6 mv3">Login
    <input id="item-login" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" autocomplete="off" />
  </label>
  <label class="db f6 fw6 mv3">Password
    <input id="item-password" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" autocomplete="off" />
    <div class="db mt1 w-100 tr">
      <input id="generate-password" type="button" class="input-reset button-reset f6 fw6 bg-blue hover-bg-dark-blue bg-animate white active-inverse pointer br1 bn ph3 pv2" value="Generate" />
    </div>
  </label>
  <label class="db f6 fw6 mv3">TOTP Secret (Base32-encoded)
    <input id="item-totpSecret" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" autocomplete="off" />
  </label>
  <div class="db tc mv3">
    <input type="hidden" name="name" id="name"/>
    <input type="hidden" name="category" id="category"/>
    <input type="hidden" name="content" id="content"/>
    <input type="hidden" name="item_key" id="item_key"/>
    <input type="hidden" name="csrf_token" value="{{csrf_token}}" />
    <input type="submit" class="f5 fw6 bg-green hover-bg-dark-green bg-animate white active-inverse pointer br1 bn ph4 pv2" value="Save" />
  </div>
</form>
</template>
<template id="template-form-note">
<form id="item-form" method="POST">
  <label class="db f6 fw6 mv3">Name*
    <input id="item-name" type="text" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30" required />
  </label>
  <label class="db f6 fw6 mv3">Category*
    <input id="item-category" list="category-list" class="input-reset db border-box f5 mt1 w-100 pa1 ba br1 b--black-30" required />
    <datalist id="item-category-list"></datalist>
  </label>
  <label class="db f6 fw6 mv3">Content
    <textarea id="item-note" class="input-reset db f5 mt1 w-100 pa1 ba br1 b--black-30 code"></textarea>
  </label>
  <div class="db tc mv3">
    <input type="hidden" name="name" id="name"/>
    <input type="hidden" name="category" id="category"/>
    <input type="hidden" name="content" id="content"/>
    <input type="hidden" name="item_key" id="item_key"/>
    <input type="hidden" name="csrf_token" value="{{csrf_token}}" />
    <input type="submit" class="f5 fw6 bg-green hover-bg-dark-green bg-animate white active-inverse pointer br1 bn ph4 pv2" value="Save" />
  </div>
</form>
</template>

<template id="template-item-type-card">
  <div class="w-100 f6 fw6">Type</div>
  <div class="mt1 flex flex-wrap tc items-stretch f6 fw6">
    <a id="item-type-login" class="db w-33-ns link white bg-blue hover-bg-dark-blue bg-animate active-inverse pv2 ph3 br1 br--left pointer">Login</a>
    <div class="w-33-ns bg-dark-blue white pv2 ph3">&#10003; Bank Card</div>
    <a id="item-type-note" class="db w-33-ns link white bg-blue hover-bg-dark-blue bg-animate active-inverse pv2 ph3 br1 br--right pointer">Note</a>
  </div>
</template>
<template id="template-item-type-login">
  <div class="w-100 f6 fw6">Type</div>
  <div class="mt1 flex flex-wrap tc items-stretch f6 fw6">
    <div class="w-33-ns bg-dark-blue white pv2 ph3 br1 br--left">&#10003; Login</div>
    <a id="item-type-card" class="db w-33-ns link white bg-blue hover-bg-dark-blue bg-animate active-inverse pv2 ph3 pointer">Bank Card</a>
    <a id="item-type-note" class="db w-33-ns link white bg-blue hover-bg-dark-blue bg-animate active-inverse pv2 ph3 br1 br--right pointer">Note</a>
  </div>
</template>
<template id="template-item-type-note">
  <div class="w-100 f6 fw6">Type</div>
  <div class="mt1 flex flex-wrap tc items-stretch f6 fw6">
    <a id="item-type-login" class="db w-33-ns link white bg-blue hover-bg-dark-blue bg-animate active-inverse pv2 ph3 br1 br--left pointer">Login</a>
    <a id="item-type-card" class="db w-33-ns link white bg-blue hover-bg-dark-blue bg-animate active-inverse pv2 ph3 pointer">Bank Card</a>
    <div class="w-33-ns bg-dark-blue white pv2 ph3 br1 br--right">&#10003; Note</div>
  </div>
</template>

<script id="item" type="application/json">{{{item}}}</script>
{{>master_password_prompt}}
{{>bundled_js}}