{% extends "base.html" %}
{#
  This file is part of GNU TALER.
  Copyright (C) 2014, 2015, 2016 INRIA

  TALER is free software; you can redistribute it and/or modify it under the
  terms of the GNU Lesser General Public License as published by the Free Software
  Foundation; either version 2.1, or (at your option) any later version.

  TALER is distributed in the hope that it will be useful, but WITHOUT ANY
  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
  A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for more details.

  You should have received a copy of the GNU Lesser General Public License along with
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>

  @author Marcello Stanisci
#}

{% block head %}
  <meta name="currency" value="{{ currency }}">
  <meta name="precision" value="{{ precision }}">
  <meta name="callback-url" value="{{ url('pin-question') }}">
  {% if withdraw and withdraw == "success" %}
    <meta name="reserve-pub" value="{{ reserve_pub }}">
  {% endif %}
  {% if suggested_exchange %}
    <meta name="suggested-exchange" value="{{ suggested_exchange }}">
  {% endif %}
  <link rel="stylesheet" type="text/css" href="{{ static('disabled-button.css') }}">
{% endblock head %}
{% block headermsg %}
  <div>
    <h1 class="nav">Welcome <em>{{ name }}</em>!</h1>
    <a href="{{ url('logout') }}" class="pure-button">[Logout]</a><br>
  </div>
{% endblock headermsg %}
{% block content %}
  <section id="menu">
    <p>Account: # {{ account_no }}</p>
    <p>Current balance: <b>{{ sign }} {{ balance }}</b></p>
  </section>
  <section id="main">
    <article>
      {% if fail_message %}
        <div class="notification">
          <p class="informational informational-fail">
            {{ hint }}
          </p>
        </div>
      {% endif %}
      {% if success_message %}
        <div class="notification">
          <p class="informational informational-ok">
            {{ hint }}
          </p>
        </div>
        {% endif %}
    </article>
    <article>
      <div class="taler-installed-hide">
        <h2>Wallet not installed!</h2>
        You need to install the Taler wallet to withdraw digital coins.
         <span id="install-done" style="visibility: hidden">(done)</span>
         <ul>
           <li>from the app store for <a
               href="https://chrome.google.com/webstore/detail/gnu-taler-wallet/millncjiddlpgdmkklmhfadpacifaonc">Google
               Chrome and Chromium</a>
           </li>
           <li>By visiting our <a href="/landing">landing page</a>.
           </li>
         </UL>
        Right now, you need Chrome or Chromium to
        install the wallet. We plan to support other browsers in the future.
      </div>

      <div>
        <h2>Withdraw digital coins using Taler</h2>

        <form id="reserve-form"
              class="pure-form"
              action="{{ url('withdraw-nojs') }}"
              method="post"
              name="tform">
          <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
          Amount to withdraw:
          <select id="reserve-amount" name="kudos_amount" autofocus>
              <option value="{{ currency }}:5.00">5.00 {{ currency }}</option>
              <option value="{{ currency }}:10.00">10.00 {{ currency }}</option>
              <option value="{{ currency }}:15.00">15.00 {{ currency }}</option>
              <option value="{{ currency }}:20.00">20.00 {{ currency }}</option>
          </select>
          <input id="select-exchange"
                 class="taler-installed-show pure-button pure-button-primary"
                 type="submit"
                 value="Select exchange provider" />
          <br />
          <br />
          <input class="taler-installed-hide pure-button pure-button-primary"
                 type="button"
                 disabled
                 value="Select exchange provider" />
        </form>
        <h2>Wire transfer</h2>
        <form id="wt-form"
              class="pure-form"
              action="{{ url('profile') }}"
              method="post"
              name="tform">

          <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
            <span class="currency-widget">
              <span class="currency-symbol">{{ currency }}</span>
              {{ wt_form.amount }}
            </span>
            <label for="id_receiver">
              to
              {{ wt_form.receiver }}
            </label>
            <br />
            <br />
            <label for="id_subject">
              subject
              {{ wt_form.subject }}
            </label>
          <input class="pure-button pure-button-primary"
                 type="submit"
                 value="Transfer!" />
        </form>
      </div>
      <p>
      </p>
    </article>
    <article>
      <h2>Transaction history</h2>
      <div id="transactions-history">
        {% if history %}
        <table class="pure-table">
          <thead>
          <tr>
            <th style="text-align:center">Date</th>
            <th style="text-align:center">Amount</th>
            <th style="text-align:center">Counterpart</th>
            <th style="text-align:center">Subject</th>
          </tr>
          </thead>
          <tbody>
          {% for item in history %}
          <tr>
            <td style="text-align:right">{{ item.date }}</td>
	    <td style="text-align:right">
              {{ item.sign }} {{ item.amount }}
            </td>
  	    <td class="text-align:left">
              {% if item.counterpart_username %}
                {{ item.counterpart_username }}
              {% endif %} (account #{{ item.counterpart }})
            </td>
	    <td class="text-align:left
              {% if item.cancelled %}
                cancelled
              {% endif %}">{{ item.subject }}
            </td>
	  </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="informational informational-fail">
          No transactions made to/from this account
        </p>
        {% endif %}
      </div>

    </article>
  </section>
{% endblock %}