{{define "body_content"}}
{{ if ne .UserName "" }}
<div id="modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Einstellungen</p>
    </header>
    <div class="modal-card-body">
      <!-- Content ... -->
      <div class="field"> <label id="label" class="label">Bezeichnung</label>
        <div class="control has-icons-right">
          <input id="alias" class="input" type="text" maxlength="25">
          <span id="alias_exclamation" class="icon is-small is-right">
            <i class="fas fa-exclamation-triangle"></i>
          </span>
        </div>
        <p id="alias_errormsg" class="help is-danger"></p>
      </div>

      <div class="field">
        <div class="control checkboxes">
          <label for="checkbox" class="checkbox"><input id="checkbox" type="checkbox" /><span> SMS Alarmierung aktiv</span></label>
        </div>
      </div>

      <div class="field">
        <label class="label">Alarmnummer (SMS)</label>
        <div class="control has-icons-right">
          <input id="smsnumber" class="input" type="text" maxlength="16"> <span id="smsnumber_exclamation" class="icon is-small is-right">
            <i class="fas fa-exclamation-triangle"></i>
          </span>
        </div>
        <p id="smsnumber_errormsg" class="help is-danger"></p>
      </div>
      
      <div class="is-size-7">
Device ID: <span id="deveui"></span>
      </div>
    </div>
    <footer class="modal-card-foot">
      <button id="modal-save" class="button is-success">OK</button>
      <button id="modal-close" class="button">Cancel</button>
    </footer>
  </div>
</div>

<div id="cart" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Abo verl&auml;ngern</p>
    </header>
    <p id="charge_data" hidden>0</p>
    <div class="modal-card-body">
      <div id="abos_verlaengern">
        <!-- Content ... -->
      </div>
      <div>
        <div class="has-margin-top-20" id="card-element">
          <!-- Elements will create input elements here -->
        </div>
        
        <!-- We'll put the error messages in this element -->
        <div class="message is-danger has-margin-top-20" id="card-errors-article" role="alert">
          <div class="message-body" id="card-errors">
          </div>
        </div>
      </div>
    </div>
    <footer class="modal-card-foot">

      <button id="cart-pay" class="button is-success">Bezahlen</button>
      <button id="cart-close" class="button">Cancel</button>
    </footer>
  </div>
</div>

<div id="payment_notifier" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Info: Bezahlung durchgef&uuml;hrt</p>
    </header>
    <div class="modal-card-body">
      <div class="message is-info">
        <div class="message-body">
Sie haben eine Abo Verl&auml;ngerung bezahlt, besten Dank!

Sie erhalten eine E-Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
        </div>
      </div>
    </div>
    <footer class="modal-card-foot">

      <button id="payment_notifier_close" class="button is-success">Schliessen</button>
    </footer>
  </div>
</div>

{{range .LastMetrics}}
<div class="column waage is-full notification is-warning">
  <p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span class="alias" id="alias_{{.Deveui}}">{{.Alias}}</span>{{ if not .Readonly }}<a class="show-modal" class="block-link"><span style="float:right;" class="icon is-size-4 is-size-5-mobile"><i class="fa fa-cog"></i></span></a>{{ end }}</p>
  <p id="alarmactive_{{.Deveui}}" hidden>{{.Alarmactive}}</p>
  <p id="smsnumber_{{.Deveui}}" hidden>{{.Smsnumber}}</p>
  <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Messung: {{.Timestamp}}</p>
  <div id="{{.Deveui}}">
    <div class="column is-full notification is-warning">
      <nav class="level">
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=t">
          <div>
            <p class="icon"><i class="fa fa-thermometer-half"></i></p>
            <p id="temp_{{.Deveui}}" class="title">{{.Temperature}} &deg;C</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=h">
          <div>
            <p class="icon"><i class="fa fa-tint"></i></p>
            <p id="humidity_{{.Deveui}}" class="title">{{.Humidity}} %</p>
          </div>
        </a>
      </div>
{{ if (lt .DaysUntilDeactivated 0) }}
      <div class="level-item has-text-centered">
        <div>
          <p class="icon"><i class="fa fa-balance-scale"></i></p>
          <p id="weight_{{.Deveui}}" class="title is-size-2 has-text-weight-bold has-text-danger">Abo ist abgelaufen</p>
        </div>
      </div>
{{ else }}
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=w">
          <div>
            <p class="icon"><i class="fa fa-balance-scale"></i></p>
            <p id="weight_{{.Deveui}}" class="title is-size-2 has-text-weight-bold">{{.Weight_kg}} kg</p>
          </div>
        </a>
      </div>
{{ end }}
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=p">
          <div>
            <p class="icon"><i class="fa fa-cloud"></i></p>
            <p id="pressure_{{.Deveui}}" class="title">{{.Pressure}} hP</p>
          </div>
        </a>
      </div>
      <div class="level-item has-text-centered">
        <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=vp">
          <div>
            <p class="icon"><i class="fa fa-battery-three-quarters"></i></p>
            <p id="acculevel_{{.Deveui}}" class="title">{{.BatteryPercent}} %</p>
          </div>
        </a>
      </div>
      </nav>
    </div>
    <div class="has-text-centered">
      <span class="is-size-6 has-text-centered">Abo aktiv bis</span>
      <span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>
    </div>
{{ if (lt .DaysUntilDeactivated 1095) }}
    <div class="has-text-centered is-size-7">
      <p class="abo_add_years_text" id="abo_add_years_text_{.Deveui}}">&nbsp;</p>
    </div>
    <div class="has-text-centered">
      <p class="abo_add_years" id="abo_add_years_{{.Deveui}}" hidden>0</p>
      <a class="block-link abo_plus is-unselectable" id="abo_plus_{{.Deveui}}">
        <span class="icon is-medium">
          <i class="fa fa-lg fa-plus"></i>
        </span>
      </a>
      <a class="block-link abo_pay is-unselectable" id="abo_{{.Deveui}}">
        <span class="icon is-medium">
          <i class="fa fa-2x fa-shopping-cart"></i>
        </span>
      </a>
      <a class="block-link abo_minus is-unselectable" id="abo_minus_{{.Deveui}}">
        <span class="icon is-medium">
          <i class="fa fa-lg fa-minus"></i>
        </span>
      </a>
    </div>
{{ end }}
  </div>
</div>

{{end}}

<script src="https://cdn.jsdelivr.net/momentjs/latest/moment-with-locales.min.js"></script>

<script src="static/js/scales.js"></script>

{{ else }}
<h4>Bitte zuerst <a href="login.html">einloggen</a></h4>
{{end}}
{{end}}