{% extends "base.html" %}
{% load i18n %}

{% block title %}
  {% if process == "connect" %}Connect {{ provider.name }}{% else %}Continue with {{ provider.name }}{% endif %}
{% endblock %}

{% block meta_description %}Secure sign-in with {{ provider.name }} for your Tecvico client portal.{% endblock %}

{% block content %}
<section class="page-hero" aria-labelledby="social-login-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">Client Portal</div>
      <h1 class="page-hero-title" id="social-login-heading">
        {% if process == "connect" %}
          Connect {{ provider.name }}
        {% else %}
          Sign in with {{ provider.name }}
        {% endif %}
      </h1>
      <p class="page-hero-subtitle">
        {% if process == "connect" %}
          Link your {{ provider.name }} account to your Tecvico profile.
        {% else %}
          You will be redirected to {{ provider.name }} to verify your identity.
        {% endif %}
      </p>
    </div>
  </div>
</section>

<section class="section">
  <div class="container container--narrow">
    <div class="glass-card portal-card fade-in social-oauth-card">
      <div class="social-oauth-provider social-oauth-provider--{{ provider.id }}">
        <span class="social-oauth-provider-icon" aria-hidden="true">
          {% if provider.id == "google" %}G{% else %}GH{% endif %}
        </span>
        <div>
          <h2 class="social-oauth-provider-title">{{ provider.name }}</h2>
          <p class="social-oauth-provider-copy">
            {% if process == "connect" %}
              {% blocktrans with provider_name=provider.name %}You are about to connect a {{ provider_name }} account to Tecvico.{% endblocktrans %}
            {% else %}
              {% blocktrans with provider_name=provider.name %}Continue to authorize access with your {{ provider_name }} account.{% endblocktrans %}
            {% endif %}
          </p>
        </div>
      </div>

      <ul class="social-oauth-steps">
        <li>Redirect to {{ provider.name }}</li>
        <li>Approve access</li>
        <li>Return to your project dashboard</li>
      </ul>

      <form method="post" class="social-oauth-form">
        {% csrf_token %}
        {% if redirect_field_value %}
        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
        {% endif %}
        <button type="submit" class="btn-primary btn-submit social-oauth-continue">
          Continue to {{ provider.name }}
        </button>
      </form>

      <p class="portal-footer-text">
        <a href="{% url 'accounts:login' %}">Back to login</a>
        ·
        <a href="{% url 'pages:home' %}">Home</a>
      </p>
    </div>
  </div>
</section>
{% endblock %}