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

{% block title %}Welcome to KitsCo{% endblock %}

{% block content %}
<div class="icon-badge icon-success">
    <span>&#128075;</span>
</div>

<h2 class="text-center">Welcome to KitsCo!</h2>
<p class="text-center text-muted">
    Hi {{ user.fullName ?? user.email }}, your account has been created successfully.
</p>

<div class="alert alert-success">
    <h4>Account Activated</h4>
    <p>You now have access to your KitsCo account. Here's what you can do:</p>
</div>

<div class="info-box">
    <table>
        <tr>
            <td class="label">Email</td>
            <td class="value">{{ user.email }}</td>
        </tr>
        {% if user.fullName %}
        <tr>
            <td class="label">Name</td>
            <td class="value">{{ user.fullName }}</td>
        </tr>
        {% endif %}
        <tr>
            <td class="label">Account Created</td>
            <td class="value">{{ 'now'|date('F d, Y') }}</td>
        </tr>
    </table>
</div>

<h3>What You Can Do</h3>
<div class="steps">
    <ul style="list-style-type: none; padding-left: 0;">
        <li style="margin-bottom: 12px;">
            <span style="display: inline-block; width: 24px; height: 24px; background: #e3f2fd; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 10px;">&#128269;</span>
            <strong>Browse Products</strong> - Explore our product catalog
        </li>
        <li style="margin-bottom: 12px;">
            <span style="display: inline-block; width: 24px; height: 24px; background: #e3f2fd; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 10px;">&#128722;</span>
            <strong>Place Orders</strong> - Order products directly online
        </li>
        <li style="margin-bottom: 12px;">
            <span style="display: inline-block; width: 24px; height: 24px; background: #e3f2fd; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 10px;">&#128196;</span>
            <strong>View Invoices</strong> - Access your invoice history
        </li>
        <li style="margin-bottom: 12px;">
            <span style="display: inline-block; width: 24px; height: 24px; background: #e3f2fd; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 10px;">&#128179;</span>
            <strong>Track Payments</strong> - Monitor your payment status
        </li>
    </ul>
</div>

{% if temporaryPassword is defined and temporaryPassword %}
<div class="alert alert-warning">
    <h4>Your Temporary Password</h4>
    <p style="font-family: monospace; font-size: 18px; background: #fff; padding: 10px; border-radius: 4px; margin-top: 10px;">{{ temporaryPassword }}</p>
    <p style="margin-top: 10px; margin-bottom: 0;">Please change your password after your first login.</p>
</div>
{% endif %}

<div class="btn-wrapper">
    <a href="{{ loginUrl|default('https://kits.co.tz/login') }}" class="btn btn-primary">Login to Your Account</a>
</div>

<hr class="divider">

<h3 class="text-center">Need Help Getting Started?</h3>
<p class="text-center text-muted">
    Our team is here to help you get the most out of your KitsCo account.
    Don't hesitate to reach out if you have any questions.
</p>

<div class="info-box" style="text-align: center;">
    <p style="margin: 0;">
        <strong>Email:</strong> <a href="mailto:sales@kits.co.tz" style="color: #e94560;">sales@kits.co.tz</a>
    </p>
</div>
{% endblock %}