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

{% block content %}

<section>
    <div class="container px-4 border-bottom">
        <div class="row gx-5 mt-5">
            <div class="col-md-6 align-self-center">

                <!-- Headline -->
                <h1 class="display-6 lh-2 py-1 fw-bold">
                    {% blocktrans %}Empower Your Financial Journey with
                    <span class="text-primary">VirtualBank</span>
                    {% endblocktrans %}
                </h1>

                {% if user.is_authenticated %}
                <p>
                    {% blocktrans trimmed %}
                    Welcome to Virtual Bank – Your Gateway to Seamless and Smart Banking!
                    Unlock Financial Freedom and discover a banking experience tailored for students at TUKE.
                    {% endblocktrans %}
                </p>
                {% else %}
                <h2 class="py-1">
                    {% trans "Ready to take control of your finances?" %}
                </h2>

                <div>
                    <a href="{% url 'login' %}" class="btn btn-primary py-1">
                        {% trans "Login" %}
                    </a>
                </div>

                <p class="py-1">
                    {% trans "Not a member yet?" %}
                    <a href="{% url 'register' %}">{% trans "Join" %}</a>
                    {% trans "VirtualBank and experience the future of student banking!" %}
                </p>

                {% endif %}

            </div>

            <div class="col-md-6 align-self-center">
                <div>
                    <img src="{% static 'images/cards_picture.png' %}"
                         alt="{% trans 'Cards picture' %}"
                         class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>

<section id="about" style="background: linear-gradient(180deg, #FFF 0%, #95B9FF 100%);">
    <div class="container px-1 py-5" id="custom-cards">

        <h2 class="display-6 my-5 lh-1 fw-bold text-center">
            {% trans "About" %}
        </h2>

        <div class="container">
            <div class="row justify-content-center mb-4 g-2">

                <!-- Bank side -->
                <div class="col-12 col-lg-3 bg-white rounded-3 m-3 p-3">
                    <div class="d-flex flex-column h-100 py-5 px-3 pb-3 text-black">
                        <h2 class="pt-2 lh-1 fw-bold">
                            {% trans "Bank Side" %}
                        </h2>
                        <p>
                            {% blocktrans trimmed %}
                            Electronic banking is today the only way to improve and speed up bank services while
                            rapidly reducing costs on the bank side. At the same time, it is the condition for the
                            development of progressive services in electronic business (E-commerce).
                            {% endblocktrans %}
                        </p>
                    </div>
                </div>

                <!-- Client side -->
                <div class="col-12 col-lg-3 bg-white rounded-3 m-3 p-3">
                    <div class="d-flex flex-column h-100 py-5 px-3 pb-3 text-black">
                        <h2 class="pt-2 lh-1 fw-bold">
                            {% trans "Client's Side" %}
                        </h2>
                        <p>
                            {% blocktrans trimmed %}
                            Electronic banking means faster access to bank information and operations, 24/7 service,
                            and fewer errors thanks to the connectivity between the client’s and the bank’s
                            information systems.
                            {% endblocktrans %}
                        </p>
                    </div>
                </div>

                <!-- VirtualBank -->
                <div class="col-12 col-lg-3 bg-white rounded-3 m-3 p-3">
                    <div class="d-flex flex-column h-100 py-5 px-3 pb-3 text-black">
                        <h2 class="pt-2 lh-1 fw-bold">VirtualBank</h2>
                        <p>
                            {% blocktrans trimmed %}
                            The creator of the complete Electronic Banking solution, VirtualBank, is a Czech-Slovak
                            software company with extensive experience in remote data communication and its security.
                            {% endblocktrans %}
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Admin strip -->
    <div class="my-1 w-100">
        <div class="row py-5 m-0 w-100 bg-black text-white">
            <div class="col-12 col-lg-6 text-center">
                <h2>{% trans "Administration" %}</h2>
            </div>
            <div class="col-12 col-lg-6 text-center">
                <a class="btn btn-primary" href="/admin">
                    {% trans "Admin page" %}
                </a>
            </div>
        </div>
    </div>
</section>

{% endblock %}