{% extends 'base.html.twig' %}

{% set fullName = (e.firstName ~ ' ' ~ e.lastName)|trim %}
{% set b = e.company.brandingConfig %}
{% set primary = (b.primaryColor is defined and b.primaryColor matches '/^#[0-9a-fA-F]{6}$/') ? b.primaryColor : '#f58220' %}

{% block title %}{{ fullName }} – zur Wallet hinzufügen{% endblock %}

{% block stylesheets %}
<style>
    .wrap { max-width: 420px; margin: 0 auto; padding: 2rem 1.2rem; }
    .wcard { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 2rem 1.6rem; text-align: center; }
    .wcard .badge-name { display: inline-block; padding: .3rem .9rem; border-radius: 999px; background: {{ primary }}; color: #fff; font-weight: 700; font-size: .92rem; }
    .wcard h1 { font-size: 1.25rem; margin: 1rem 0 .2rem; }
    .wcard .muted { color: var(--muted); font-size: .9rem; margin: 0 0 1.4rem; }
    .wbtns { display: flex; flex-direction: column; gap: .7rem; align-items: center; }
    .wbtn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; max-width: 280px;
            padding: .85rem 1.2rem; border-radius: 12px; font-weight: 700; font-size: .98rem; text-decoration: none; }
    .wbtn--apple { background: #000; color: #fff; }
    .wbtn--google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
    .wbtn:hover { opacity: .92; text-decoration: none; }
    .wbtn .ic { font-size: 1.1rem; }
    .whint { color: var(--muted); font-size: .82rem; margin-top: 1.4rem; }
    .wback { display: inline-block; margin-top: 1.2rem; color: var(--muted); font-size: .85rem; }
    .order { order: 2; }
</style>
{% endblock %}

{% block body %}
<div class="wrap">
    <div class="wcard">
        <span class="badge-name">{{ e.company.name }}</span>
        <h1>{{ fullName }}</h1>
        <p class="muted">{% if e.position %}{{ e.position }} · {% endif %}Digitale Visitenkarte zur Wallet hinzufügen</p>

        {% if appleEnabled or googleEnabled %}
            <div class="wbtns">
                {% if appleEnabled %}
                    <a class="wbtn wbtn--apple {{ preferApple ? '' : 'order' }}" href="{{ path('wallet_apple', {code: code}) }}">
                        <span class="ic"></span> Zu Apple Wallet
                    </a>
                {% endif %}
                {% if googleEnabled %}
                    <a class="wbtn wbtn--google {{ preferApple ? 'order' : '' }}" href="{{ path('wallet_google', {code: code}) }}">
                        <span class="ic">🅖</span> Zu Google Wallet
                    </a>
                {% endif %}
            </div>
            <p class="whint">Öffne diesen Link auf deinem Smartphone, um die Karte zu speichern.</p>
        {% else %}
            <p class="whint">Wallet-Pässe sind für diesen Anbieter noch nicht aktiviert.</p>
        {% endif %}

        <a class="wback" href="{{ path('public_profile', {companySlug: e.company.slug, slug: e.slug}) }}">← zum Profil</a>
    </div>
</div>
{% endblock %}