{% extends "portal_base.html" %}

{% block title %}Services - OutsideTheBox{% endblock %}

{% block portal_content %}
<div class="portal-page-header">
  <div>
    <h1 class="portal-page-title">Services</h1>
    <p class="portal-client-name">
      {{ client.contact_name or client.company_name or client.email }}
    </p>
    <p class="portal-page-subtitle">Launch available OTB services from one place.</p>
  </div>

  <div class="portal-toolbar" style="display:flex;flex-direction:column;align-items:flex-end;gap:10px;">
    <div style="display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;">
      <a class="portal-btn primary" href="/portal/dashboard">Back to Dashboard</a>
      <a class="portal-btn" href="/portal/logout">Logout</a>
    </div>

    <div style="text-align:right;font-size:14px;opacity:0.95;">
      <div>Logged in as:
           <strong>{{ client.contact_name or client.company_name or client.email }}</strong></div>
    </div>
  </div>
</div>

<section class="services-grid">
  {% for service in services %}
  <article class="service-card status-{{ service.status }}">
    <div class="service-card-header">
      <div>
        <h2>{{ service.name }}</h2>
        <p>{{ service.summary }}</p>
      </div>

      <div>
        {% if service.status == 'beta' %}
          <span class="service-badge service-badge-beta">Beta</span>
        {% elif service.status == 'coming_soon' %}
          <span class="service-badge service-badge-soon">Coming Soon</span>
        {% else %}
          <span class="service-badge">Available</span>
        {% endif %}
      </div>
    </div>

    <div class="service-card-actions">
      {% if service.enabled %}
        <a class="portal-btn primary" href="{{ service.href }}"
           {% if service.href.startswith('http') %}target="_blank" rel="noopener noreferrer"{% endif %}>{{ service.button_text }}</a>
      {% else %}
        <button class="portal-btn btn-disabled" disabled>{{ service.button_text }}</button>
      {% endif %}
    </div>
  </article>
  {% endfor %}
</section>

<style>
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.service-card {
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(8, 18, 37, 0.72);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.service-card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.service-card h2 {
  margin: 0 0 10px 0;
  font-size: 1.3rem;
}

.service-card p {
  margin: 0;
  line-height: 1.5;
  opacity: 0.92;
}

.service-card-actions {
  margin-top: 22px;
}

.service-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255,255,255,0.10);
}

.service-badge-beta {
  background: rgba(73, 192, 255, 0.18);
}

.service-badge-soon {
  background: rgba(255, 196, 73, 0.18);
}

.btn-disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
</style>
{% endblock %}