{% extends "base.html" %}
{% block title %}{{ t.billing_pricing_title }} - {{ config.APP_NAME }}{% endblock %}

{% block head %}
<meta name="description" content="{{ t.billing_pricing_meta_desc }}">
<meta property="og:title" content="{{ t.billing_pricing_og_title }} - {{ config.APP_NAME }}">
<meta property="og:description" content="{{ t.billing_pricing_og_desc }}">
{% endblock %}

{% block content %}
<main class="container-page py-12">
  <div class="heading-group text-center">
    <h1 class="text-3xl">{{ t.billing_pricing_h1 }}</h1>
    <p>{{ t.billing_pricing_subtitle }}</p>
  </div>

  <div class="grid-2 mt-8">
    <div class="card">
      <p class="card-header">{{ t.billing_planner_card }}</p>
      <p class="text-lg font-bold text-navy mb-4">{{ t.billing_planner_free }} <span class="text-sm font-normal text-slate">{{ t.billing_planner_forever }}</span></p>
      <ul class="space-y-2 text-sm text-slate-dark mb-6">
        <li>{{ t.billing_feature_1 }}</li>
        <li>{{ t.billing_feature_2 }}</li>
        <li>{{ t.billing_feature_3 }}</li>
        <li>{{ t.billing_feature_4 }}</li>
        <li>{{ t.billing_feature_5 }}</li>
        <li>{{ t.billing_feature_6 }}</li>
      </ul>
      {% if user %}
      <a href="{{ url_for('planner.index') }}" class="btn w-full text-center">{{ t.billing_open_planner }}</a>
      {% else %}
      <a href="{{ url_for('auth.signup') }}" class="btn w-full text-center">{{ t.billing_create_account }}</a>
      {% endif %}
    </div>

    <div class="card">
      <p class="card-header">{{ t.billing_help_card }}</p>
      <p class="text-slate-dark mb-4">{{ t.billing_help_subtitle }}</p>
      <ul class="space-y-2 text-sm text-slate-dark mb-6">
        <li>{{ t.billing_help_feature_1 }}</li>
        <li>{{ t.billing_help_feature_2 }}</li>
        <li>{{ t.billing_help_feature_3 }}</li>
        <li>{{ t.billing_help_feature_4 }}</li>
      </ul>
      {% if user %}
      <a href="{{ url_for('leads.suppliers') }}" class="btn-outline w-full text-center">{{ t.billing_get_quotes }}</a>
      {% else %}
      <a href="{{ url_for('auth.signup') }}" class="btn-outline w-full text-center">{{ t.billing_signup }}</a>
      {% endif %}
    </div>
  </div>
</main>
{% endblock %}
