<!DOCTYPE html>
<html dir="{{ direction }}" lang="{{ lang }}">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta charset="UTF-8">

    <title>{{ title }}</title>
    <base id="base-urls" href="{{ base }}" data-base-url-loja="{{ baseloja }}">
    {% if description %}
      <meta name="description" content="{{ description }}">
    {% endif %}
    {% if keywords %}
      <meta name="keywords" content="{{ keywords }}">
    {% endif %}
    {% for link in links %}
      <link href="{{ link.href }}" rel="{{ link.rel }}">
    {% endfor %}

    {% for style in styles %}
      <link rel="{{ style.rel }}" type="text/css" href="{{ style.href }}" media="{{ style.media }}">
    {% endfor %}

    {% if logged %}
      <!-- Google Tag Manager -->
      <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-KMS6XDG');</script>
      <!-- End Google Tag Manager -->

      <!-- begin Wootric code -->
      <script type="text/javascript">
        var surveyDate = Math.floor(new Date() / 1000);
        window.wootricSettings = {
          email: 'Client ID: {{ client_id }}', // TODO: Required to uniquely identify a user. Email is recommended but this can be any unique identifier.
          account_token: 'NPS-6084f9c6', // This is your unique account token.
          created_at: surveyDate,
          scale_color: 'gradient', // The options are 'three-color' and 'gradient'.
          {% if theme %}modal_theme: 'dark',{% endif %}
          modal_footprint: 'compact',
        };
      </script>
      <script type="text/javascript" src="https://cdn.wootric.com/wootric-sdk.js"></script>
      <script type="text/javascript">
        // This loads the Wootric survey
        window.wootric('run');
      </script>
      <!-- end Wootric code -->
    {% endif %}

    {% for script in scripts %}
      <script type="text/javascript" src="{{ script }}"></script>
    {% endfor %}



    <script type="text/javascript">
      $(document).ready(function() {
        /* Mascaras e Formatos - por Henrique R. Pohl */
        jQuery(function($){
          var SPMaskBehavior = function (val) {
            return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
          },
          spOptions = {
            onKeyPress: function(val, e, field, options) {
              field.mask(SPMaskBehavior.apply({}, arguments), options);
            }
          };
          $('.date').mask('00/00/0000');
          $('.fax-phone, .telephone').mask('(00) 0000-0000');
          $('.cpf').mask('000.000.000-00');
          $('.cnpj').mask('00.000.000/0000-00');
          $(".phone").mask('(99) 9999-9999?9');
          $('#postcode').mask('00000-000');
          $('#celular').mask(SPMaskBehavior, spOptions);
        });

        //-----------------------------------------
        // Confirm Actions (delete, uninstall)
        //-----------------------------------------
        // Confirm Delete
        $('#form').submit(function(){
          if ($(this).attr('action').indexOf('delete',1) != -1) {
            if (!confirm('{{ text_confirm }}')) {
              return false;
            }
          }
        });
        // Confirm Uninstall
        $('a').click(function(){
          if ($(this).attr('href') != null && $(this).attr('href').indexOf('uninstall', 1) != -1) {
            if (!confirm('{{ text_confirm }}')) {
              return false;
            }
          }
        });
      });

    </script>
    <style>
      /* DataPicker Lista de Presentes - por Henrique R. Pohl */
      .ui-widget-header {
        background:{{ wg24_top_cart_bgcol }};
        border: {{ wg24_top_cart_bgcol }};
        color: {{ wg24_topcart_te_colo }};
      }
      .ui-widget-header .ui-icon {
        background-image: none !important;
      }
      #ui-datepicker-div a.ui-datepicker-prev.ui-corner-all:before {
        content: "\f053";
        font-family:'Font Awesome 5 Free';
        font-size: 16px;
        color: {{ wg24_topcart_te_colo }} !important;
        font-style: normal;
        position: relative;
        top: 5px;
        left: 8px;
      }
      #ui-datepicker-div a.ui-datepicker-next.ui-corner-all:before {
        content: "\f054";
        font-family:'Font Awesome 5 Free';
        font-size: 16px;
        color: {{ wg24_topcart_te_colo }} !important;
        font-style: normal;
        position: relative;
        top: 5px;
        right: -2px;
        text-decoration: none !important;
      }
      .ui-datepicker .ui-datepicker-next {
        right: 1px;
      }
      .ui-datepicker .ui-datepicker-prev {
        left: 1px;
      }
      .ui-datepicker .ui-datepicker-prev,
      .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 1px;
        text-decoration: inherit;
      }
      .ui-datepicker select.ui-datepicker-month,
      .ui-datepicker select.ui-datepicker-year {
         width: 47%;
         margin: 0 2px 0 2px;
       }
      .ui-state-hover,
      .ui-widget-content .ui-state-hover,
      .ui-widget-header .ui-state-hover,
      .ui-state-focus,
      .ui-widget-content .ui-state-focus,
      .ui-widget-header .ui-state-focus {
        border: none;
        background: none;
      }
      /* DataPicker Lista de Presentes - por Henrique R. Pohl */
    </style>

  </head>
  <body data-token="{{ token }}" data-globals='{{ globals|json_encode() }}' {% if theme %}class="dark"{% endif %}>
  {% if logged %}
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KMS6XDG"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    {{ nav }}

    {{ notifications }}

    <div class="adm-suspended-side background-white shadow-large flex flex-column auto-overflow js-suspended-side js-suspended-side-help">
      <div class="padding-large flex between-xs middle-xs js-suspended-side-close js-suspended-side-close">
        <span class="text-x-large text-dark text-bold">{{ text_help }}</span>
        <i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
      </div>
      <div class="horizontal-padding-large">
        <a href="{{ link_manual_integracao }}" target="_blank" class="text-decoration-none visible-block">
          <span class="text-small text-primary">{{ text_manual_integracao }}</span>
        </a>
        <a href="{{ link_suporte_futura }}" target="_blank" class="text-decoration-none visible-block top-margin-large">
          <span class="text-small text-primary">{{ text_suporte_futura }}</span>
        </a>
        {% if link_version %}
          <a href="{{ link_version }}" target="_blank" class="text-decoration-none visible-block top-margin-large">
            <span class="text-small text-primary">{{ text_version }}</span>
          </a>
        {% endif %}
      </div>
      <div class="left-padding-large vertical-margin-large visible-block">
        <hr class="bottom-border-gray">
      </div>
      <div class="js-content-manual"></div>
    </div>

    <div class="adm-suspended-side background-white shadow-large flex flex-column auto-overflow js-suspended-side js-suspended-side-account">
      <div class="padding-large flex between-xs middle-xs js-suspended-side-close">
        <div>
          <span class="text-medium text-dark text-bold visible-block">{{ infos_empresa }}</span>
          <span class="text-x-small text-dark text-uppercase">{{ logged }}</span>
        </div>
        <i class="fas fa-times text-medium text-gray padding-small cursor-pointer"></i>
      </div>
      {% if hospedagem_disco_utilizado %}
      <div class="horizontal-padding-large">
        <div class="flex between-xs">
          <span class="text-small text-dark">{{ hospedagem_plano }}</span>
          <span class="text-small text-dark">{{ hospedagem_percentual_disco_usado }}% usado</span>
        </div>
        <div style="
          background: #2c699d;
          background: -moz-linear-gradient(left, #2c699d 0%, #2c699d {{ hospedagem_percentual_disco_usado }}%, #dddddd calc({{ hospedagem_percentual_disco_usado }}% + 1px));
          background: -webkit-linear-gradient(left, #2c699d 0%,#2c699d {{ hospedagem_percentual_disco_usado }}%,#dddddd calc({{ hospedagem_percentual_disco_usado }}% + 1px));
          background: linear-gradient(to right, #2c699d 0%,#2c699d {{ hospedagem_percentual_disco_usado }}%,#dddddd calc({{ hospedagem_percentual_disco_usado }}% + 1px));"
          class="top-padding-x-small vertical-margin-small">
        </div>
        <div class="flex between-xs">
          <span class="text-small text-dark">{{ hospedagem_disco_utilizado }}</span>
          <a href="{{ link_hospedagem_planos }}" target="_blank" class="text-small text-primary text-decoration-none">{{ text_hospedagem_upgrade }}</a>
        </div>
      </div>
      {% endif %}

      <div class="left-padding-large top-margin-large visible-block">
        <hr class="bottom-border-gray">
      </div>

      {% for dominio in listaDominios %}
      <div class="flex between-xs middle-xs horizontal-padding-large top-padding-large">
        {{ not dominio.dominio_vinculado ? '<i class="fas fa-exclamation-triangle text-error text-small"></i>' : '' }}

        <label {{ not dominio.dominio_vinculado ? 'style="width:calc(100% - 20px);"' : ' class="radio radio-medium"' }}>
          {% if dominio.dominio_vinculado %}
          <input type="radio" name="dominio" class="radio-entry" value="" {{ dominio.prioridade == 0 ? 'checked' : '' }} >
          <div class="radio-text" data-dominio="{{ dominio.dominio }}" data-principal="{{ dominio.prioridade == 0 }}">
          {% endif %}

            <div class="left-padding-x-small">
              {% if not dominio.dominio_vinculado %}
                <span class="text-x-small text-error text-bold text-uppercase">DOMÍNIO NÃO ESTÁ VINCULADO COM O SERVIDOR</span>
              {% endif %}

              {% if dominio.intervalo_dias_val_dominio < -5000 %}
                <span class="text-x-small text-warning text-bold text-uppercase">Data de validade do domínio indisponível</span>
              {% elseif dominio.intervalo_dias_val_dominio == 0 %}
                <span class="text-x-small text-warning text-bold text-uppercase">Seu domínio vai expirar amanhã</span>
              {% elseif dominio.intervalo_dias_val_dominio < 1 %}
                <span class="text-x-small text-error text-bold text-uppercase">Seu domínio está expirado à {{ dominio.intervalo_dias_val_dominio_expirado }} dias</span>
              {% elseif dominio.intervalo_dias_val_dominio < 30 %}
                <span class="text-x-small text-warning text-bold text-uppercase">Faltam {{ dominio.intervalo_dias_val_dominio }} dias para seu domínio expirar</span>
                <span class="text-small text-gray visible-block">Data de renovação: {{ dominio.validade_dominio }}</span>
              {% else %}
                <span class="text-small text-gray visible-block">Data de renovação: {{ dominio.validade_dominio }}</span>
              {% endif %}

              <span class="text-medium text-dark text-bold visible-block bottom-padding-x-small">{{ dominio.dominio }}</span>

              <div class="flex between-xs middle-xs">
                {% if dominio.intervalo_dias_val_SSL < 1 %}
                  <span class="text-x-small text-error text-bold text-uppercase">O seu certificado SSL está expirado</span>
                {% elseif dominio.intervalo_dias_val_SSL < 30 %}
                  <span class="text-x-small text-warning text-bold text-uppercase">Faltam {{ dominio.intervalo_dias_val_SSL }} dias para seu certificado SSL expirar</span>
                {% endif %}
                <div data-tooltip="Certificado SSL">
                  <i class="fas fa-lock text-small text-gray"></i>
                  <span class="text-small text-gray">{{ dominio.certificadora_SSL }}</span>
                </div>
                <span class="text-small text-gray" data-tooltip="Data de Expiração">{{ dominio.validade_SSL }}</span>
              </div>
            </div>

          {{ dominio.dominio_vinculado ? '</div>' : '' }}
        </label>
      </div>
      {% endfor %}

      <div class="left-padding-large top-margin-large visible-block">
        <hr class="bottom-border-gray">
      </div>

      <div class="left-padding-large top-margin-large visible-block">
        <span class="text-medium text-dark text-bold visible-block bottom-padding-small">{{text_server_dns_info}}:</span>

        {% for key, value in Type_ServerDnsAddress.getEnumList() %}
          <span class="text-medium text-dark visible-block bottom-padding-x-small">{{value}}: {{key}}</span>
        {% endfor %}
      </div>

      <div class="left-padding-large top-margin-large visible-block">
        <hr class="bottom-border-gray">
      </div>

      <div class="horizontal-padding-large">
        <a href="{{ hospedagem_link_cpanel }}" target="_blank" class="text-decoration-none visible-block top-margin-large">
          <span class="text-small text-primary">{{ text_hospedagem_ir_cpanel }}</span>
        </a>
        <a href="{{ alterar_senha }}" data-modal-id="change-password" class="text-decoration-none visible-block top-margin-large">
          <span class="text-small text-primary">{{ text_alterar_senha }}</span>
        </a>
        <a href="{{ logout }}" class="text-decoration-none visible-block top-margin-large">
          <span class="text-small text-primary">{{ text_logout }}</span>
        </a>
      </div>
    </div>
    {% if hospedagem_percentual_disco_usado > 80 %}
    <div class="adm-wait-urgent flex middle-xs vertical-padding-small horizontal-padding-medium">
      <i class="fas fa-exclamation-triangle text-light padding-small bottom-margin-x-small"></i>
      <span class="text-small text-light padding-small col-sm">{{ text_hospedagem_notificacao_disco }}</span>
      <a href="{{ link_hospedagem_planos }}" target="_blank" class="btn-default btn-medium-square btn-outline margin-small">
        <span class="text-small text-light">{{ text_hospedagem_upgrade }}</span>
      </a>
    </div>
    {% endif %}

    {% if infos_dominio is defined %}
      <div class="adm-wait-urgent flex middle-xs vertical-padding-small horizontal-padding-medium top-margin-x-small">
        <i class="fas fa-exclamation-triangle text-light padding-small bottom-margin-x-small"></i>
        <div class="padding-small col-sm">
          {% if expirado and expirar %}
            <span class="text-medium text-light text-bold visible-block">{{ text_dominio_notificacao_expirar_expirado }}</span>
          {% else %}
            {% if expirado %}
              <span class="text-medium text-light text-bold visible-block">{{ text_dominio_notificacao_expirado }}</span>
            {% else %}
              <span class="text-medium text-light text-bold visible-block">{{ text_dominio_notificacao_expirar }}</span>
            {% endif %}
          {% endif %}
          <span class="text-small text-light">{{ text_dominio_notificacao_expirado_obs }}</span>
        </div>
        <button class="btn-default btn-medium-square btn-outline margin-small js-dominio">
          <span class="text-small text-light">{{ text_dominio_access }}</span>
        </button>
      </div>
    {% endif %}

  {% endif %}

  <div id="vue-file-manager">
    <file-manager
      v-if="open"
      @close="open = false"
      @file="onSelectedFile"
      :max-width="maxWidth"
      :max-height="maxHeight"
      :min-width="minWidth"
      :min-height="minHeight"
      :square="square"
      :extensions="extensions"
      :hide-selection="hideSelection"
      :show-folder-icons="showFolderIcons"
    />
  </div>

  <script src="{{vue_file_manager}}"></script>

  <script type="text/javascript">

    $('.js-dominio').on('click', function(){
      $('.js-suspended-teste').trigger('click');
    });

    $('.radio-text').click(function(){
      if (!$(this).data('principal')){
        if (confirm("Confirmar a alteração do dominio principal do site para "+$(this).data('dominio')+"?")) {
          $.ajax({
            url: 'index.php?route=setting/setting/setDominio&token={{ token }}',
            type: 'POST',
            data: {novodominio: $(this).data('dominio')},
            dataType: 'json',
            success: function(json) {
              location = json['redirect']+'admin/index.php?route=common/home&token={{ token }}';
            }
          });
        }
      }
    });

    var typesFromPHP = {{ types|json_encode() }};
    for (let i = 0; i < typesFromPHP.length; i++) {
      new Type(typesFromPHP[i]);
    }
  </script>
