{% extends 'base.html' %}
{% load monitor_filter %}

{% block content %}
<div class="form-box">
  <h2>Monitor</h2>
  <a href="/monitor" class="button button-primary">Refresh</a><br/>
  <font size="-1">last update: {{last_updated|date:'Y-m-d H:i:s'}} ({{django_timezone}})</font><br/>
  <p>Hint: these numbers are not very accurate.</p>

  Total investment: {{total_investment|floatformat:2}} EUR<br/>
  Virtual value of wallet: {{current_value|floatformat:2}} EUR<br/>
  Total tax free: {{total_tax_free|floatformat:2}} EUR<br/>
  <br/>
  
{% for c in cryptos %}
  <input type="checkbox" id="acc{{ c.crypto }}" />
  <label for="acc{{ c.crypto }}">
    {{ c.crypto }}
    {% if c.rateEUR %}{{c.rateEUR|monitorformatcurrency}} EUR{% endif %}
    {% if c.rateUSD %}{{c.rateUSD|monitorformatcurrency}} USD{% endif %}
  </label>

  <div class="content">
    {% if c.rates %}
      <ul class="tab-nav" id="tabnav{{ c.crypto }}">
          <li>
            <a class="button" href="#info{{ c.crypto }}">Info</a>
          </li>
          <li>
            <a class="button" href="/transactions/show?crypto={{ c.crypto }}" target="_blank">Transactions</a>
          </li>
          <li>
            <a class="button" href="#rates{{ c.crypto }}">Rates Text</a>
          </li>
          <li>
            <a class="button active" href="#h48{{ c.crypto }}">48 hours</a>
          </li>
          <li>
            <a class="button" href="#d3{{ c.crypto }}">3 days</a>
          </li>
          <li>
            <a class="button" href="#w1{{ c.crypto }}">1 week</a>
          </li>
          <li>
            <a class="button" href="#m1{{ c.crypto }}">1 month</a>
          </li>
          <li>
            <a class="button" href="#m6{{ c.crypto }}">6 months</a>
          </li>
          <li>
            <a class="button" href="#y1{{ c.crypto }}">1 year</a>
          </li>
          <li>
            <a class="button" href="#y10{{ c.crypto }}">10 years</a>
          </li>
      </ul>
      <div class="tab-content" id="tabcontent{{ c.crypto }}">

          <div class="tab-pane" id="Info{{ c.crypto }}">
              <h4>Info</h4>

              {% if c.bought %}
              We have bought {{ c.crypto }} for {{ c.bought|floatformat:2 }} EUR<br/>
              {% endif %}
              {% if c.sold %}
              We have sold {{ c.crypto }} for {{ c.sold|floatformat:2 }} EUR<br/>
              {% endif %}
              {% if c.amount_kept %}
              Current value of our <span title="{{ c.amount_kept }} {{ c.crypto }}">{{ c.amount_kept|monitorformatcurrency }} {{ c.crypto }}</span> is {{ c.current_value|floatformat:2 }} EUR<br/>
              {% endif %}
              {% if c.bought_recently %}
              We have bought within the last 12 months:  {{ c.bought_recently|monitorformatcurrency }} {{ c.crypto }}<br/>
              {% endif %}
              {% if c.bought_tax_free %}
              We can sell without paying taxes: {{ c.bought_tax_free|monitorformatcurrency }} {{ c.crypto }} for {{ c.value_tax_free|floatformat:2 }} EUR<br/>
              {% endif %}

              <br/><a href="/transactions/show?crypto={{ c.crypto }}">My transactions</a><br/>
<!--
              <br/>
              Google: <br/>
              <a href='https://www.google.com/search?channel=crow2&client=firefox-b-d&q={{ c.crypto }}+in+eur%3D' target='_blank'>{{ c.crypto }} in EUR</a><br/>
              <a href='https://www.google.com/search?channel=crow2&client=firefox-b-d&q={{ c.crypto }}+in+usd%3D' target='_blank'>{{ c.crypto }} in USD</a><br/>
-->
          </div>

          <div class="tab-pane" id="Rates{{ c.crypto }}">
              <h4>Rates</h4>

              <table>
                {% for r in c.rates %}
                <tr>
                    <td>{{ r.dateRelative }}</td>
                    <td>{{ r.date|date:'Y-m-d' }}</td>
                    <td>{{ r.rateEUR|monitorformatcurrency }} EUR/{{ c.crypto }}</td>
                    <td>{% if r.diffPercentage %}
                        {{ r.diffPercentage|floatformat:1 }}%
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
              </table>

          </div>
          {% for g in c.graphs %}
          <div class="tab-pane {{g.active}}" id="{{ g.id }}{{ c.crypto }}">
              <h4>{{ g.label }}</h4>
              <img src="/graph?crypto={{ c.crypto }}&fiat=EUR&{{g.period}}" loading="lazy"><br/>
              Start: {{ g.startdate }} {{ g.startvalue|monitorformatcurrency }} EUR<br/>
              Now: {{ g.curdate }} {{ g.curvalue|monitorformatcurrency }} EUR<br/>
              Diff: {{ g.diffPercentage|floatformat:1 }} %<br/>
              Min: {{ g.mindate }} {{ g.minvalue|monitorformatcurrency }} EUR<br/>
              Max: {{ g.maxdate }} {{ g.maxvalue|monitorformatcurrency }} EUR<br/>
          </div>
          {% endfor %}
      </div>
    {% endif %}

  </div>

{% endfor %}

  <input type="checkbox" id="accWALLET" />
  <label for="accWALLET">
    My Wallet
    {% if wallet.rateEUR %}{{wallet.rateEUR|monitorformatcurrency}} EUR{% endif %}
  </label>
  <div class="content">
      <ul class="tab-nav" id="tabnavWallet">
          <li>
            <a class="button" href="#w1Wallet">1 week</a>
          </li>
          <li>
            <a class="button active" href="#m1Wallet">1 month</a>
          </li>
          <li>
            <a class="button" href="#m6Wallet">6 months</a>
          </li>
          <li>
            <a class="button" href="#y1Wallet">1 year</a>
          </li>
          <li>
            <a class="button" href="#y3Wallet">3 years</a>
          </li>
          <li>
            <a class="button" href="#y5Wallet">5 years</a>
          </li>
          <li>
            <a class="button" href="#y10Wallet">10 years</a>
          </li>
      </ul>
      <div class="tab-content" id="tabcontentWallet">

          {% for g in wallet.graphs %}
          <div class="tab-pane {{g.active}}" id="{{ g.id }}Wallet">
              <h4>{{ g.label }}</h4>
              <img src="/graph?crypto=WALLET&fiat=EUR&{{g.period}}" loading="lazy"><br/>
          </div>
          {% endfor %}
      </div>
  </div>

<br/><br/><br/>

</div>
{% endblock %}