{% load static portal_tags %}
<!doctype html>
<html lang="pt-PT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>{{ page_title|default:"Portal" }} · Kreate4Web</title>
  <link rel="icon" href="{% static 'branding/kreate4web-favicon.png' %}">
  <link rel="stylesheet" href="{% static 'unfold/fonts/inter/styles.css' %}">
  <link rel="stylesheet" href="{% static 'unfold/fonts/material-symbols/styles.css' %}">
  <link rel="stylesheet" href="{% static 'css/client-portal.css' %}?v=9.3.0">
</head>
<body{% if portal_preview_mode %} class="portal-preview-active{% if not portal_preview_interactive %} portal-preview-readonly{% endif %}"{% endif %}>
<div class="portal-shell">
  <aside class="portal-sidebar" id="portal-sidebar">
    <a class="portal-brand" href="{% url 'client_portal:dashboard' %}">
      <img src="{% static 'branding/kreate4web-mark.png' %}" alt="Kreate4Web">
      <span><strong>Portal</strong><small>Kreate4Web</small></span>
    </a>
    <div class="portal-client-card">
      <span class="portal-avatar">{% if portal_user_profile.avatar %}<img src="{{ portal_user_profile.avatar.url }}" alt="">{% else %}{{ portal_client.name|first|upper }}{% endif %}</span>
      <div><strong>{{ portal_client.name }}</strong><small>{{ portal_access.get_role_display }}</small></div>
    </div>
    <nav class="portal-nav" aria-label="Navegação principal">
      <a class="{% if active_nav == 'dashboard' %}is-active{% endif %}" href="{% url 'client_portal:dashboard' %}"><span>◫</span> Visão geral</a>
      <a class="{% if active_nav == 'services' %}is-active{% endif %}" href="{% url 'client_portal:services' %}"><span>◈</span> Serviços</a>
      <a class="{% if active_nav == 'monitoring' %}is-active{% endif %}" href="{% url 'client_portal:monitoring' %}"><span>◉</span> Estado dos websites</a>
      <a class="{% if active_nav == 'renewals' %}is-active{% endif %}" href="{% url 'client_portal:renewals' %}"><span>↻</span> Renovações</a>
      {% if portal_access.can_view_financial %}<a class="{% if active_nav == 'payments' %}is-active{% endif %}" href="{% url 'client_portal:payments' %}"><span>€</span> Pagamentos</a>{% endif %}
      {% if portal_access.can_view_documents %}<a class="{% if active_nav == 'documents' %}is-active{% endif %}" href="{% url 'client_portal:documents' %}"><span>▤</span> Documentos</a>{% endif %}
      <a class="{% if active_nav == 'tickets' %}is-active{% endif %}" href="{% url 'client_portal:tickets' %}"><span>✉</span> Suporte {% if unread_ticket_count %}<b>{{ unread_ticket_count }}</b>{% endif %}</a>
      <a class="{% if active_nav == 'profile' %}is-active{% endif %}" href="{% url 'client_portal:profile' %}"><span>◎</span> Contactos da entidade</a>
    </nav>
    <div class="portal-sidebar-footer">
      <a href="https://www.kreate4web.com/" target="_blank" rel="noopener">Visitar Kreate4Web ↗</a>
      <small>Portal v{{ k4w_version }} · {{ k4w_environment }}</small>
    </div>
  </aside>
  <main class="portal-main">
    <header class="portal-topbar">
      <button class="portal-menu-button" type="button" onclick="document.body.classList.toggle('nav-open')" aria-label="Abrir menu">☰</button>
      <div class="portal-page-title"><p>ÁREA PRIVADA</p><h1>{{ page_title|default:"Portal do cliente" }}</h1></div>
      <div class="portal-header-actions">
        {% if portal_preview_mode %}<a class="portal-round-action" href="{% url 'client_preview_center' %}" title="Mudar cliente"><span>⇄</span></a>{% else %}<a class="portal-round-action" href="{% url 'security:overview' %}" title="Segurança e configurações"><span>⚙</span></a>{% endif %}
        <div class="portal-popover-wrap">
          <button class="portal-round-action" type="button" data-toggle="notifications" title="Notificações"><span>🔔</span>{% if k4w_notification_count %}<b>{{ k4w_notification_count }}</b>{% endif %}</button>
          <div class="portal-header-popover portal-notification-popover" data-popover="notifications">
            <header><strong>Notificações</strong><a href="{% url 'client_portal:notifications' %}">Ver todas</a></header>
            {% for item in k4w_client_notifications %}<a href="{{ item.url }}"><span class="portal-mini-icon">{{ item.icon|slice:":1"|upper }}</span><div><strong>{{ item.title }}</strong><small>{% if item.count %}{{ item.count }} ocorrência{{ item.count|pluralize }}{% else %}Sem ocorrências{% endif %}</small></div>{% if item.count %}<b>{{ item.count }}</b>{% endif %}</a>{% endfor %}
          </div>
        </div>
        <div class="portal-popover-wrap">
          <button class="portal-user-chip" type="button" data-toggle="profile">
            <span class="portal-top-avatar">{% if portal_user_profile.avatar %}<img src="{{ portal_user_profile.avatar.url }}" alt="">{% else %}{{ portal_access.display_name|first|upper }}{% endif %}</span>
            <span><strong>{{ portal_access.display_name }}</strong><small>{{ portal_access.get_role_display }}</small></span><em>⌄</em>
          </button>
          <nav class="portal-header-popover portal-profile-popover" data-popover="profile">
            <p>{% if portal_preview_mode %}PRÉ-VISUALIZAÇÃO{% else %}CONTA{% endif %}</p>
            <a href="{% url 'client_portal:dashboard' %}"><span>▣</span>Painel</a>
            {% if portal_preview_mode %}
            <a href="{% url 'client_preview_center' %}"><span>⇄</span>Mudar de cliente</a>
            <a href="{% url 'admin:index' %}"><span>◫</span>Voltar ao backoffice</a>
            <a class="is-danger" href="{% url 'client_preview_stop' %}"><span>⌁</span>Terminar pré-visualização</a>
            {% else %}
            <a href="{% url 'security:account' %}"><span>●</span>Editar a minha conta</a>
            <a href="{% url 'security:overview' %}"><span>◆</span>Segurança e 2FA{% if k4w_two_factor_enabled %}<em>Ativo</em>{% endif %}</a>
            <form method="post" action="{% url 'security:logout' %}">{% csrf_token %}<button type="submit"><span>⌁</span>Terminar sessão</button></form>
            {% endif %}
          </nav>
        </div>
      </div>
    </header>
    {% if portal_preview_mode %}<section class="portal-preview-banner {% if portal_preview_interactive %}is-interactive{% else %}is-readonly{% endif %}"><span class="material-symbols-outlined">visibility</span><div><strong>A visualizar como {{ portal_client.name }}</strong><p>{{ portal_access.display_name }} · {{ portal_access.get_role_display }} · {% if portal_preview_interactive %}Teste interativo{% else %}Só de leitura{% endif %}</p></div><a href="{% url 'client_preview_center' %}">Mudar cliente</a><a href="{% url 'client_preview_stop' %}">Terminar</a></section>{% endif %}
    {% if messages %}<div class="portal-messages">{% for message in messages %}<div class="portal-alert portal-alert--{{ message.tags|default:'info' }}">{{ message }}</div>{% endfor %}</div>{% endif %}
    <section class="portal-content">{% block content %}{% endblock %}</section>
    <footer class="portal-footer"><span>© {% now "Y" %} Kreate4Web · K4W</span><span>Portal v{{ k4w_version }} · {{ k4w_environment }}</span><span>Websites · e-Commerce · Apps · Portais web</span></footer>
  </main>
</div>
<script>
(function(){
  document.querySelectorAll('[data-toggle]').forEach(function(button){
    button.addEventListener('click', function(event){
      event.stopPropagation();
      var name=button.dataset.toggle;
      document.querySelectorAll('[data-popover]').forEach(function(pop){pop.classList.toggle('is-open', pop.dataset.popover===name && !pop.classList.contains('is-open'));});
    });
  });
  document.addEventListener('click', function(){document.querySelectorAll('[data-popover]').forEach(function(pop){pop.classList.remove('is-open');});});
  document.querySelectorAll('[data-popover]').forEach(function(pop){pop.addEventListener('click', function(e){e.stopPropagation();});});
})();
</script>
</body>
</html>
