{% extends 'layout.html' %}
{% block main_content %}
<h1>Accounts</h1>
{% if accounts %}
  <table class="table">
  <tr><th>Name</th><th>Type</th><th>Institution</th><th>Last Update</th><th></th></tr>
  {% for account in accounts %}
  <tr>
    <td>{{ account.name }}</td>
    <td>{{ account.type }}</td>
    <td>{{ account.source.name }}</td>
    <td>Never</td>
    <td>
      <form method="POST" action="/update/">
        <input type="hidden" name="account_uuid" value="{{ account.uuid }}"></input>
        <input type="submit" value="Update" class="btn btn-primary"></input>
      </form>
    </td>
  </tr>
  {% endfor %}
  </table>
{% else %}
  <p>You don't have any accounts yet. Let's create some</p>
{% endif %}
<h1>Add new account</h1>
<form method="POST" action="/account/">
  <div class="form-group">
    <label for="name">Name</label>
    <input id="name" type="text" name="name" class="form-control" placeholder="My OFX account"></input>
    <label for="institution">Institution</label>
    <input id="institution" type="text" name="institution" class="form-control" list="institutions" placeholder="Start typing..."></input>
    <label for="user_id">User ID</label>
    <input id="user_id" type="text" name="user_id" class="form-control" placeholder="123456"></input>
    <label for="password">Password</label>
    <input id="password" type="password" name="password" class="form-control" placeholder="1234"></input>
    <label for="account_id">Account ID</label>
    <input id="account_id" type="text" name="account_id" class="form-control" placeholder="123456-0.9:CHK"></input>
    <label for="type">Account Type</label>
    <select id="account_type" value="checking" name="account_type" class="form-control">
      <option value="checking">Checking</option>
      <option value="checking">Savings</option>
    </select>
    <input class="btn btn-primary form-control" type="submit" value="Create Account"></input>
    <datalist id="institutions">
      {% for source in sources %}
      <option value="{{ source.name }}">{{ source.name }}</option>
      {% endfor %}
    </datalist>
  </div>
</form>
{% endblock %}