{% set isPremium = hubleto.env().isPremium() %}

<h1 class="app-main-title">
  <div style="font-size:30pt">Hubleto Cloud</div>
</h1>
<br/>


{% if hubleto.config().getAsString('legalDocumentsAccepted') == '' %}

  <script>
    function acceptLegalDocuments() {
      let chk = $('#accept-legal-documents');
      if (chk.is(':checked')) {
        window.location.href = '{{ config.projectUrl }}/cloud/api/accept-legal-documents';
      } else {
        $('#accept-legal-documents-wrapper').addClass('bg-red-200');
      }
    }
  </script>
  <div class="md:w-1/2 m-auto">
    <div class="card card-body block text-xl">
      {{ user.first_name ?? user.email }}, {{ translate('welcome to Hubleto cloud.') }} 👍
    </div>
    <div class="card card-body block mt-2">
      {{ translate('We are happy you decided to use Hubleto.') }}<br/>
      {{ translate('Before you start, you should first read, understand and accept our') }}
      <a class="btn btn-transparent btn-small btn-primary-outline" href="https://www.hubleto.eu/en/terms-of-use" target="_blank"><span class="text">{{ translate('Terms of use') }}</span></a> {{ translate('and') }}
      <a class="btn btn-transparent btn-small btn-primary-outline" href="https://www.hubleto.eu/en/privacy-policy" target="_blank"><span class="text">{{ translate('Privacy policy') }}</span></a>.<br/>
      <br/>
      {{ translate('Therefore, we kindly ask you to go through these documents and appoint your consent') }}
      {{ translate('by ticking the checkbox below.') }}
    </div>
    <div class="card card-body mt-2 text-left block" id="accept-legal-documents-wrapper">
      <div class="flex items-center gap-2">
        <input id="accept-legal-documents" type="checkbox" style="zoom:2">
        <label for="accept-legal-documents">{{ translate('I have read, undestrood and agree to the') }} <i>{{ translate('Terms of use') }}</i> {{ translate('and') }} <i>{{ translate('Privacy policy') }}</i> {{ translate('of Hubleto cloud') }}.
      </div>
    </div>
    <button id="accept-btn" class="btn btn-primary btn-large mt-2" onclick="acceptLegalDocuments();">
      <span class="icon"><i class="fas fa-arrow-right"></i></span>
      <span class="text">{{ translate('Continue to the dashboard') }}</span>
    </button>
  </div>

{% else %}
  <div class="grid grid-cols-2 gap-2 mt-2">
    <div>
      {% if isPremium %}
        <div class="badge badge-success text-center text-2xl p-4 block">
          <i class="fas fa-medal mr-2"></i>
          {{ translate('You are upgraded to Premium') }}
        </div>
        {% if viewParams.freeTrialInfo.isTrialPeriod %}
          {% if viewParams.freeTrialInfo.isTrialPeriodExpired %}
            <div class="badge badge-danger block text-center text-2xl p-4 mt-2">
              <i class="fas fa-times mr-2"></i> {{ translate('Free trial expired.') }}<br/>
            </div>
          {% else %}
            <div class="badge badge-warning block text-center text-2xl p-4 mt-2">
              {{ translate('Free trial expires in') }} <b>{{ viewParams.freeTrialInfo.trialPeriodExpiresIn }} {{ translate('days') }}</b>.<br/>
            </div>
          {% endif %}
        {% endif %}
        {% if not viewParams.subscriptionInfo.isActive %}
          {# <div class="block badge text-center badge-danger p-4 mt-2">
            <div class="text-2xl">{{ translate('Your Premium account is blocked') }}</div>
            <div class="mt-2">
              <a class="btn btn-white" href="{{ config.projectUrl }}/cloud/activate-subscription-renewal">
                <span class="icon"><i class="fas fa-arrow-up"></i></span>
                <span class="text">{{ translate('Activate subscription') }}</span>
              </a>
              or
              <a class="btn btn-white" href="{{ config.projectUrl }}/cloud">
                <span class="icon"><i class="fas fa-arrow-down"></i></span>
                <span class="text">{{ translate('Downgrade to Personal account') }}</span>
              </a>
            </div>
          </div> #}
          <div class="block badge text-center badge-danger p-4 mt-2">
            <div class="text-2xl">{{ translate('Your subscription is inactive') }}</div>
            <div>
              {{ translate('Make a payment to reactivate it again.') }}
            </div>
          </div>
        {% else %}
          {% if viewParams.subscriptionInfo.renewalActive %}
            <div class="block badge text-center badge-success p-4 mt-2">
              <div class="text-2xl">
                <i class="fas fa-rotate mr-2"></i> {{ translate('Automatic subscription renewal is active') }}
              </div>
              <div class="text-base my-2">
                {{ translate('Access to your Premium account will be automaticaly renewed next month.') }}
              </div>
            </div>
          {% else %}
            <div class="block badge text-center badge-danger p-4 mt-2">
              <div class="text-2xl">
                <i class="fas fa-times mr-2"></i> {{ translate('Automatic subscription renewal is deactivated') }}
              </div>
              <div class="text-base my-2">
                {{ translate('Access to your Premium account will be blocked on ') }}<br/>
                <b>{{ hubleto.config().getAsString('cloud/subscriptionActiveUntil')|date('l, F jS Y') }}</b>.
              </div>
              <div class="mt-8">
                <a class="btn btn-square btn-large btn-warning" href="{{ config.projectUrl }}/cloud/activate-subscription-renewal">
                  <span class="icon"><i class="fas fa-rotate"></i></span>
                  <span class="text">{{ translate('Activate subscription renewal') }}</span>
                </a>
              </div>
            </div>
          {% endif %}
        {% endif %}
        <div class="flex gap-2 w-full mt-2">
          <a href="https://pay.hubleto.eu/?accountUid={{ config.accountUid }}&partnerUid={{ config.partnerUid }}&monthlyPrice={{ viewParams.priceForThisMonth }}" class="flex-1 btn btn-add-outline btn-square btn-large" target="_blank">
            <span class="icon text-4xl p-8"><i class="fas fa-credit-card"></i></span>
            <span class="text">{{ translate('Extend subscription') }}</span>
            <span class="text text-xs">{{ translate('You will be redirected to the payment provider') }}</span>
          </a>
        </div>
        <div class="card mt-2">
          <div class="card-header">
            {{ translate('Your Premium benefits') }}
          </div>
          <div class="card-body flex gap-2 w-full">
            <ul class="grow">
              <li class="my-2"><i class="mr-2 fas fa-check text-green-500"></i> {{ translate('unlimited users') }}</li>
              <li class="my-2"><i class="mr-2 fas fa-check text-green-500"></i> {{ translate('more apps & features') }}</li>
              <li class="my-2"><i class="mr-2 fas fa-check text-green-500"></i> {{ translate('premium support') }}</li>
            </ul>
            <div class="grow text-right">
              <a href="settings" class="btn btn-primary-outline">
                <span class="icon"><i class="fas fa-cog"></i></span>
                <span class="text">{{ translate('Add new users or install new apps') }}</span>
              </a>
            </div>
          </div>
        </div>
        <div class="card mt-2">
          <div class="card-header">
            {{ translate('Your Hubleto partner') }}
          </div>
          <div class="card-body flex gap-2 w-full">
            <div class="max-w-32 p-8">
              <img id="partnerLogo" />
            </div>
            <div class="grow">
              <div id="partnerName" class="font-bold"></div>
              <div id="partnerAbout"></div>
              <div id="partnerWebsite"></div>
              <br/>
              {{ translate('Technical support') }}: <div id="partnerTechnicalSupportEmail" class="badge"></div>
              {{ translate('Sales') }}: <div id="partnerSalesEmail" class="badge"></div>
            </div>
          </div>
        </div>
        <script>
          $.get({
            url: 'cloud/api/get-partner-info', 
            dataType: 'json',
            success: (partnerInfo) => {
              console.log(partnerInfo);
              $("#partnerLogo").attr('src', 'https://partners.hubleto.eu/logo/' + partnerInfo.logo);
              $("#partnerName").html(partnerInfo.name);
              $("#partnerAbout").html(partnerInfo.about);
              $("#partnerTechnicalSupportEmail").html(partnerInfo.technicalSupportEmail);
              $("#partnerSalesEmail").html(partnerInfo.salesEmail);
              $("#partnerWebsite").html(partnerInfo.website);
            }
          });
        </script>
      {% else %}
        <div class="badge badge-warning text-2xl p-4 block text-center">{{ translate('You are using free personal account') }}</div>
        <div class="card mt-2">
          <div class="card-header">
            {{ translate('Upgrade to Premium and you\'ll get') }}
          </div>
          <div class="card-body">
            <ul>
              <li class="my-2"><i class="mr-2 fas fa-check text-green-500"></i> {{ translate('unlimited users') }}</li>
              <li class="my-2"><i class="mr-2 fas fa-check text-green-500"></i> {{ translate('more apps & features') }}</li>
              <li class="my-2"><i class="mr-2 fas fa-check text-green-500"></i> {{ translate('premium support') }}</li>
            </ul>
          </div>
        </div>
        <div class="card mt-2">
          <div class="card-header">{{ translate('Activate Premium account') }}</div>
          <div class="card-body text-center">
            <button
              class="btn btn-success btn-square p-8 w-full"
              onclick="$(this).slideUp(); $('#activate-premium-step-2').slideDown();"
            >
              <span class="icon" style="font-size:2em"><i class="fas fa-medal"></i></span>
              <span class="text" style="font-size:2em;max-height:40em">{{ translate('Activate Premium account') }}</span>
            </button>
            <div id="activate-premium-step-2" class="text-left" style="display:none">
              <div>
                {{ translate('You will be given') }} <span class="badge badge-info text-base">{{ translate('30 days of free') }}
                {{ translate('trial period') }}</span> {{ translate('to configure payment method.') }}
                {{ translate("Please type your account's email address below") }}
                {{ translate("to confirm that you realy want to activate Premium account") }}.<br/>
                <br/>
                <input id="activate-premium-confirm-email" class="w-full" placeholder="{{ translate('To confirm, type your email address here.') }}" />
              </div>
              <div class="mt-2">
                <button
                  onclick="
                    let input = $('#activate-premium-confirm-email');
                    if (input.val() == '{{ user.email }}') {
                      window.location.href = '{{ config.projectUrl }}/cloud/api/activate-premium-account';
                    } else {
                      input.addClass('bg-red-200');
                      setTimeout(function() { input.removeClass('bg-red-200'); }, 500);
                    }
                  "
                  class="btn btn-success btn-square p-2 w-full"
                >
                  <span class="icon" style="font-size:2em"><i class="fas fa-medal"></i></span>
                  <span class="text" style="font-size:2em;max-height:40em">{{ translate('Go! Activate premium account now.') }}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      {% endif %}
    </div>

    <div>
      <div class="mt-2 list">
        <a href="cloud/payments-and-invoices" class="btn btn-transparent btn-list-item">
          <span class="icon"><i class="fas fa-receipt"></i></span>
          <span class="text">{{ translate('Show payments and download invoices') }}</span>
        </a>
        <a href="cloud/billing-accounts" class="btn btn-transparent btn-list-item">
          <span class="icon"><i class="fas fa-coins"></i></span>
          <span class="text">{{ translate('Manage billing accounts') }}</span>
        </a>
        {# <a href="cloud/test/make-random-payment" class="btn btn-transparent btn-list-item">
          <span class="icon"><i class="fas fa-euro"></i></span>
          <span class="text">TEST: Simulate random payment</span>
        </a>
        <a href="cloud/test/clear-credit" class="btn btn-transparent btn-list-item">
          <span class="icon"><i class="fas fa-euro"></i></span>
          <span class="text">TEST: Clear credit</span>
        </a> #}
      </div>
      <div class="card mt-2">
        <div class="card-header">{{ translate('Usage info') }}</div>
        <div class="card-body">
          <table class="table-default dense">
            <thead>
              <tr>
                <th>{{ translate('Month') }}</th>
                <th>{{ translate('Active users') }}</th>
                <th>{{ translate('Paid apps') }}</th>
              </tr>
            </thead>
            <tbody>
              {% for log in viewParams.log %}
                <tr>
                  <td>{{ log.year }}-{{ log.month }}</td>
                  <td>{{ log.max_active_users }}</td>
                  <td>{{ log.max_paid_apps }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
          <div class="mt-2">
            <a class="btn btn-transparent small" href="cloud/log">
              <span class="text">{{ translate('Show details') }}</span>
            </a>
          </div>
        </div>
        <div class="card-body">
          <table class="table-default dense">
            <tr>
              <td>{{ translate('Price for this month') }}</td>
              <td><b>{{ viewParams.priceForThisMonth|number_format(2, ",", " ") }} €</b> <sup>(*)</sup></td>
            </tr>
            <tr>
              <td>{{ translate('Terms of use and privacy policy accepted') }}</td>
              <td><b>{{ hubleto.config().getAsString('cloud/legalDocumentsAccepted')|date('l, F jS Y') }}</b></td>
            </tr>
            <tr>
              <td>{{ translate('Subscription active until') }}</td>
              <td><b>{{ hubleto.config().getAsString('cloud/subscriptionActiveUntil')|date('l, F jS Y') }}</b></td>
            </tr>
            <tr>
              <td>{{ translate('Premium account activated') }}</td>
              <td><b>{{ hubleto.config().getAsString('cloud/premiumAccountSince')|date('l, F jS Y') }}</b></td>
            </tr>
            <tr>
              <td>{{ translate('Free trial until') }}</td>
              <td><b>{{ hubleto.config().getAsString('cloud/freeTrialPeriodUntil')|date('l, F jS Y') }}</b></td>
            </tr>
            <tr>
              <td>{{ translate('Account UID') }}</td>
              <td><b>{{ viewParams.app.getAccountUid() }}</b></td>
            </tr>
            <tr>
              <td>{{ translate('Variable symbol for payments') }}</td>
              <td><b>{{ viewParams.app.getPaymentVariableSymbol() }}</b></td>
            </tr>
          </table>
          <small class="text-gray-500">(*) {{ translate('Price is calculated based on maximum number of active users or paid apps during this month.') }}</small>
          <div class="mt-2">
            <a class="btn btn-transparent" href="{{ config.projectUrl }}/cloud/deactivate-subscription-renewal">
              <span class="icon"><i class="fas fa-stop"></i></span>
              <span class="text">{{ translate('Deactivate subscription renewal') }}</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endif %}