<script type="text/javascript" src="/content/countdown.min.js"></script>
<script id="variables" type="text/json">
{
  [% IF node.expiration %]"expiration": [% node.expiration %],[% END %]
  [% IF node.time_balance %]]"time_balance": [% node.time_balance %],[% END %]
}
</script>
<script type="text/javascript" src="/content/status.js"></script>

[% IF txt_auth_error.defined %]
<div class="o-media o-media--error u-padding u-margin-bottom">
  <div class="o-media__img">[% flashIcon(level='error') %]</div>
  <p class="o-media__body">[% i18n(txt_auth_error) %]</p>
</div>
[% END %]

[%- IF node.expiration %]
<div class="o-media o-media--notice u-padding u-margin-bottom">
  <div class="o-media__img">[% flashIcon(level='notice', size='tiny') %]</div>
  <p class="o-media__body">
    <div>[% i18n('Your network access ends in <strong id="expiration"></strong>') %]</div>
    <div id="pause" style="display: none">[% i18n("Your network access is <strong>paused</strong>") %]</div>
  </p>
</div>
[%- ELSIF node.time_balance %]
<div class="o-media o-media--notice u-padding u-margin-bottom">
  <div class="o-media__img">[% flashIcon(level='notice', size='tiny') %]</div>
  <p class="o-media__body">[% i18n_format("You're not connected to the network, but have a timebank of <strong id='timeleft'>%s</strong>", node.time_balance ) %]</p>
</div>
[%- ELSIF node.time_balance == 0 %]
<div class="o-media o-media--error u-padding u-margin-bottom">
  <div class="o-media__img">[% flashIcon(level='error') %]</div>
  <p class="o-media__body">[% i18n("Your network access has expired.") %]</p>
</div>
[%- END %]

[%- IF billing %]
<div class="o-layout o-layout--center">
  <div class="o-layout__item u-margin-top u-1/1 u-2/3@tablet u-3/5@desktop">
    <a href="/status/billing" class="c-btn c-btn--secondary c-btn--ghost u-1/1">
      [% i18n("Extend your access") %]
    </a>
  </div>
</div>
[%- END %]

[% IF status_msg.defined %]
<div class="u-padding">
  <div class="o-media o-media--notice u-padding u-margin-bottom">
    <div class="o-media__img">[% flashIcon(level='notice', size='tiny') %]</div>
    <p class="o-media__body">[% i18n(status_msg) %]</p>
  </div>
</div>
[% ELSIF status_msg_error.defined %]
<div class="u-padding">
  <div class="o-media o-media--error u-padding u-margin-bottom">
    <div class="o-media__img">[% flashIcon(level='error') %]</div>
    <p class="o-media__body">[% i18n(status_msg_error) %]</p>
  </div>
</div>
[% END %]

[%- IF nodes.size > 0 %]
<div class="o-layout--center u-padding">
  <h2>[% i18n("Your registered devices") %]</h2>
      [%- FOREACH n IN nodes %]
      [% IF n.mac == node.mac AND node.status == 'reg' %]
      <div class="[ box box--highlight ][ c-frame c-frame--raised ] u-margin-top-tiny">
        <div class="[ o-layout o-layout--middle ]">
          <div class="[ o-layout__item o-layout--left ] [ u-1/1 u-1/2@tablet ]">
            <ul class="o-list-bare u-margin-none">
              [% IF node.category %]<li class="o-list-bare__item">[% i18n("Current Role ") %]<b>[% node.category %]</b></li>[% END %]
              [% IF node.device_class %]<li class="o-list-bare__item">[% i18n("OS Type ") %]<b>[% node.device_class %]</b></li>[% END %]
              [% IF node.computername %]<li class="o-list-bare__item">[% i18n("Computer name ") %]<b>[% node.computername %]</b></li>[% END %]
              [% IF node.bandwidth_balance %]<li class="o-list-bare__item">[% i18n("Bandwidth balance ") %]<b>[% node.bandwidth_balance %]</b></li>[% END %]
              <li class="o-list-bare__item">[% i18n("MAC") %] <b>[% node.mac %]</b></li>
              [% IF node.regdate != '0000-00-00 00:00:00' %]<li class="o-list-bare__item">[% i18n("Registered on") %] <b>[% node.regdate %]</b></li>[% END %]
            </ul>
          </div><div class="o-layout__item o-layout--right [ u-1/2 u-1/1@palm ]">
              <div>[% i18n("This is your current device.") %]</div>
          </div>
        </div>
      </div>
      [% END %]

      [% NEXT IF n.status != 'reg' OR n.mac == node.mac %]
      [% IF n.lostOrStolen %]
      <div class="[ o-box o-box--overlook ][ c-frame ] u-margin-top-tiny">
        <div class="[ o-layout o-layout--middle ]">
          <div class="[ o-layout__item o-layout--left ] [ u-1/1 u-1/2@tablet ]">
            <ul class="o-list-bare u-margin-none">
              [% IF n.category %]<li class="o-list-bare__item">[% i18n("Current Role ") %]<b>[% n.category %]</b></li>[% END %]
              [% IF n.device_class %]<li class="o-list-bare__item">[% i18n("OS Type ") %]<b>[% n.device_class %]</b></li>[% END %]
              [% IF n.computername %]<li class="o-list-bare__item">[% i18n("Computer name ") %]<b>[% n.computername %]</b></li>[% END %]
              [% IF n.bandwidth_balance %]<li class="o-list-bare__item">[% i18n("Bandwidth balance ") %]<b>[% n.bandwidth_balance %]</b></li>[% END %]
              [% IF n.time_balance %]<li class="o-list-bare__item">[% i18n("Time balance ") %]<b>[% n.time_balance %]</b></li>[% END %]
              <li class="o-list-bare__item">[% i18n("MAC") %] <b>[% n.mac %]</b></li>
              [% IF n.regdate != '0000-00-00 00:00:00' %]<li class="o-list-bare__item">[% i18n("Registered on") %] <b>[% n.regdate %]</b></li>[% END %]
            </ul>
          </div><div class="o-layout__item o-layout--right [ u-1/1 u-1/2@tablet ]">
              <div>[% i18n("This device is declared as lost or stolen.") %]</div>
          </div>
        </div>
      </div>
      [% ELSE %]
      <div class="[ o-box ][ c-frame c-frame--raised ] u-margin-top-tiny">
        <div class="[ o-layout ]">
          <div class="[ o-layout__item o-layout--left ] [ u-1/1 u-1/2@tablet ]">
            <ul class="o-list-bare u-margin-none">
                <li class="o-list-bare__item">[% i18n("Current Role ") %]<b>[% IF n.category ; n.category ; ELSE ; "None" ; END %]</b></li>
                [% IF n.device_class %]<li class="o-list-bare__item">[% i18n("OS Type ") %]<b>[% n.device_class %]</b></li>[% END %]
                [% IF n.computername %]<li class="o-list-bare__item">[% i18n("Computer name ") %]<b>[% n.computername %]</b></li>[% END %]
                [% IF n.bandwidth_balance %]<li class="o-list-bare__item">[% i18n("Bandwidth balance ") %]<b>[% n.bandwidth_balance %]</b></li>[% END %]
                [% IF n.time_balance %]<li class="o-list-bare__item">[% i18n("Time balance ") %]<b>[% n.time_balance %]</b></li>[% END %]
                <li class="o-list-bare__item">[% i18n("MAC") %] <b>[% n.mac %]</b></li>
                [% IF n.regdate != '0000-00-00 00:00:00' %]<li class="o-list-bare__item">[% i18n("Registered on") %] <b>[% n.regdate %]</b></li>[% END %]
            </ul>
          </div><div class="o-layout__item o-layout--right [ u-1/1 u-1/2@tablet ]">
            <a href="/node/manager/unreg/[% n.mac %]"
               data-box-show="confirmUnregister[% n.mac.remove('\W+') %]"
               class="[ c-btn c-btn--secondary c-btn--small js-box-show ] u-margin-bottom@desktop">[% i18n("Unregister") %]</a><br/>
            <a href="/loststolen/[% n.mac %]"
               data-box-show="confirmLostStolen[% n.mac.remove('\W+') %]"
               class="[ c-btn c-btn--tertiary c-btn--small btn--light js-box-show ]">[% i18n("Declare as lost or stolen") %]</a>
          </div>
        </div>
        <div id="confirmUnregister[% n.mac.remove('\W+') %]" class="[ o-box o-box--small o-box--inverted o-box--overlap ] hide">
          <div class="[ o-layout o-layout--middle ]">
            <div class="[ o-layout__item o-layout--center ] [ u-1/1 ]">
              <div class="[ u-margin-bottom-tiny u-margin-bottom@tablet ]">[% i18n_format("Unregister %s? The device will be immediately disconnected from the network.", n.mac) %]</div>
              <a href="/node/manager/unreg/[% n.mac %]" class="[ c-btn c-btn--secondary c-btn--small c-btn--error ]">[% i18n("Unregister") %]</a>
              <a href="#cancel" class="[ c-btn c-btn--tertiary c-btn--small js-box-hide ]">[% i18n("Cancel") %]</a>
            </div>
          </div>
        </div>
        <div id="confirmLostStolen[% n.mac.remove('\W+') %]" class="[ o-box o-box--small o-box--inverted o-box--overlap ] hide">
          <div class="[ o-layout o-layout--middle ]">
            <div class="[ o-layout__item o-layout--center ] [ u-1/1 ]">
              <div class="[ u-margin-bottom-tiny u-margin-bottom@tablet ]">[% i18n_format("The device %s will be disconnected and won't be able to be registered again.", n.mac) %]</div>
              <a href="/loststolen/[% n.mac %]" class="[ c-btn c-btn--secondary c-btn--small c-btn--error ]">[% i18n("Declare as lost or stolen") %]</a>
              <a href="#cancel" class="[ c-btn c-btn--tertiary c-btn--small js-box-hide ]">[% i18n("Cancel") %]</a>
            </div>
          </div>
        </div>
      </div>
      [% END %]

      [%- END %]
</div>
[%- ELSE %]
<div class="u-padding">
  <div class="o-media o-media--notice u-padding u-margin-bottom">
    <div class="o-media__img">[% flashIcon(level='notice', size='tiny') %]</div>
    <p class="o-media__body">[% i18n("You have no registered devices.") %]</p>
  </div>
</div>
[%- END %]

[% IF psk.defined %]
<div class="u-padding">
  <div class="o-media o-media--notice u-padding u-margin-bottom">
    <div class="o-media__img">[% flashIcon(level='notice', size='tiny') %]</div>
    <p class="o-media__body">[% i18n("Your WPA Wi-Fi key: ") %] [% psk %]</p>
  </div>
</div>
[% END %]


<div class="o-layout o-layout--center">
  <div class="o-layout__item u-padding u-1/1 u-2/3@tablet u-3/5@desktop">
    [% IF isDeviceRegEnable %]
    <a href="/device-registration" class="c-btn c-btn--secondary c-btn--ghost u-1/1">
      [% i18n("Register another device") %]
    </a>
    [% END %]
    [%- IF hasLocalAccount %]
    <a href="/status/reset_password" class="c-btn c-btn--secondary c-btn--ghost u-1/1 u-margin-top-small">
      [% i18n("Change my password") %]
    </a>
    [% END %]
    [% IF stripeCustomerPortalEnabled %]
    <a href="/stripe-customer-portal" class="c-btn c-btn--secondary c-btn--ghost u-1/1 u-margin-top-small">
      [% i18n("Network subscriptions") %]
    </a>
    [% END %]
    <a href="[% IF logout_url ; logout_url ; ELSE %]/status/logout[% END %]" class="c-btn c-btn--tertiary u-1/1 u-margin-top-small">
      [% i18n("Logout") %]
    </a>
  </div>
</div>
