{% extends "base.html" %}

{% block content %}
<section class="panel public-services-panel">
  <h1 class="public-services-title">{{ tr("Service Price Table") }}</h1>
  <p class="lead public-services-intro">
    {{ tr("Tương Tác Real publishes transparent social engagement service prices in TIC, updated continuously based on system configuration.") }}
  </p>
  <p class="muted public-services-meta">
    {{ tr("There are currently {count} publicly listed services for your review before placing orders.", count=services|length) }}
  </p>
  {% if not services %}
    <p class="muted">{{ tr("No public services available yet.") }}</p>
  {% else %}
  <div class="table-shell">
    <table>
      <thead>
        <tr>
          <th>{{ tr("Service ID") }}</th>
          <th>{{ tr("Name") }}</th>
          <th>{{ tr("Min") }}</th>
          <th>{{ tr("Max") }}</th>
          <th>{{ tr("Price / 1") }}</th>
        </tr>
      </thead>
      <tbody>
        {% for service in services %}
        <tr>
          <td>{{ service['service_id'] }}</td>
          <td><span class="service-name-with-icon">{{ service['service_name_display'] }}</span></td>
          <td>{{ service['min_qty'] or '-' }}</td>
          <td>{{ service['max_qty'] or '-' }}</td>
          <td>{{ service['price_per_1000_tic']|ticfmt }} TIC</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</section>

<section class="panel public-services-seo-copy" aria-labelledby="public-services-overview-title">
  <h2 id="public-services-overview-title">{{ tr("Transparent social service pricing that is easy to reconcile") }}</h2>
  <p>
    {{ tr("Each service displays service code, minimum/maximum quantity, and TIC unit price so you can estimate costs before ordering.") }}
  </p>
  <p>
    {{ tr("The public price table helps you quickly verify options before signing in and topping up TIC, reducing mistakes when selecting the right service for your growth goals.") }}
  </p>
</section>

<section class="panel public-services-faq" aria-labelledby="public-services-faq-title">
  <h2 id="public-services-faq-title">{{ tr("Frequently asked questions about service pricing") }}</h2>

  <article>
    <h3>{{ tr("What does TIC unit pricing mean?") }}</h3>
    <p>
      {{ tr("Unit pricing is shown in TIC so you can estimate budget before placing an order. The system calculates the exact fee based on your requested quantity.") }}
    </p>
  </article>

  <article>
    <h3>{{ tr("Do I need to sign in to view prices?") }}</h3>
    <p>
      {{ tr("No. This page publicly lists all active services so you can compare prices and plan before creating an account.") }}
    </p>
  </article>

  <article>
    <h3>{{ tr("Why does each service have Min/Max limits?") }}</h3>
    <p>
      {{ tr("Min/Max limits keep orders within each service capacity, reducing errors from quantities that are too low or too high.") }}
    </p>
  </article>
</section>
{% endblock %}