{% include "includes/site_nav.html" %}

<div class="portal-wrap">

<h1>Services Here</h1>
<p>Launch available OTB services.</p>
<p>Logged in as: {{ client_name }}</p>
{% block title %}Services Here{% endblock %}

{% block content %}
<section class="portal-hero">
  <div class="portal-hero-copy">
    <h1>Services Here</h1>
    <p class="portal-subtitle">
      Launch available OTB services from one place.
    </p>
    <p class="portal-muted">
      Logged in as: {{ client_name }}
    </p>
  </div>

  <div class="portal-hero-actions">
    <a class="btn btn-secondary" href="{{ url_for('client_portal_dashboard') }}">Back to Dashboard</a>
  </div>
</section>

<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 class="service-badge-wrap">
        {% 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="btn btn-primary" href="{{ service.href }}">{{ service.button_text }}</a>
      {% else %}
        <button class="btn btn-disabled" type="button" disabled>{{ service.button_text }}</button>
      {% endif %}
    </div>
  </article>
  {% endfor %}
</section>

<style>
  .portal-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }

  .portal-hero h1 {
    margin: 0 0 8px 0;
  }

  .portal-subtitle {
    margin: 0 0 8px 0;
    opacity: 0.95;
  }

  .portal-muted {
    margin: 0;
    opacity: 0.75;
    font-size: 0.95rem;
  }

  .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;
    white-space: nowrap;
    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 %}
</div>