{% extends "base.html" %}
{% load i18n static %}
{% block content %}
    <div class="container px-4 px-md-0">
        <div class="row mb-4">
            <div class="col">
                <div class="text-center mt-4">
                    <h1 class="display-2 fw-bold">Patrick Canal</h1>
                    <p class="text-secondary fs-2 text-uppercase fw-bold">{% trans "Fullstack developer & system administrator" %}</p>
                    <p class="text-secondary fs-3">
                        {% blocktrans %}
                        I build modern web applications with a focus on
                        clean code, usability and performance.
                        {% endblocktrans %}
                    </p>
                </div>
                <div class="mb-4 text-center">
                    <div class="mb-2">
                        <span class="badge bg-blue-lt fs-4 m-1">Python</span>
                        <span class="badge bg-blue-lt fs-4 m-1">Django</span>
                        <span class="badge bg-blue-lt fs-4 m-1">JavaScript/TypeScript</span>
                        <span class="badge bg-blue-lt fs-4 m-1">HTML/CSS</span>
                    </div>
                    <div>
                        <span class="badge bg-blue-lt fs-4 m-1">Docker</span>
                        <span class="badge bg-blue-lt fs-4 m-1">Git</span>
                        <span class="badge bg-blue-lt fs-4 m-1">Linux</span>
                        <span class="badge bg-blue-lt fs-4 m-1">NixOS</span>
                    </div>
                </div>
                <div class="text-center">
                    <a href="{% url 'projects' %}" class="btn btn-primary btn-lg me-2">My projects</a>
                    <a href="#contact-me" class="btn btn-outline-secondary btn-lg">Contact me</a>
                </div>
            </div>
        </div>
        <div class="row row-deck row-cards">
            <div class="col-md-4">
                <div class="card h-full">
                    <div class="card-body d-flex align-items-center flex-column">
                        <div class="w-24 h-30">
                            <img src="{% static 'images/nix-logo.svg' %}" alt="NixOS logo">
                        </div>
                        <b class="fs-2">{% trans "NixOS enthusiast" %}</b>
                        <p class="text-secondary text-center mt-2">
                            {% blocktrans %}
                        Linux user for years my OS of choice is NixOS, embrace reproducibility!
                        {% endblocktrans %}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-full">
                    <div class="card-body d-flex align-items-center flex-column">
                        <div class="w-24 h-30">
                            <img src="{% static 'images/foss-logo.webp' %}" alt="FOSS logo">
                        </div>
                        <b class="fs-2">{% trans "FOSS lover" %}</b>
                        <p class="text-secondary text-center mt-2">
                            {% blocktrans %}
                            Every line of code that I write for myself is open source<br />
                            Public money should be invested in public code
                            {% endblocktrans %}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-full">
                    <div class="card-body d-flex align-items-center flex-column">
                        <div class="w-24 h-30 text-5xl pt-4">
                            <i class="fa-solid fa-server fa-2xl"></i>
                        </div>
                        <b class="fs-2">{% trans "Homelab maintainer" %}</b>
                        <p class="text-secondary text-center mt-2">
                            {% blocktrans %}
                            One of the projects that I am most proud of is my homelabbing activity, 
                            check it out on my <a href="https://github.com/Superredstone/nixos/tree/main/machines/bomba" target="_blank">Github</a>
                            {% endblocktrans %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="hr"></div>
        <div>
            <h2 class="fs-1 pb-2">{% trans "Job experiences" %}</h2>
            <ul class="timeline">
                {% for je in job_experiences %}
                    <li class="timeline-event">
                        <div class="timeline-event-icon bg-primary">
                            <img src="{% url 'company-logo' pk=je.company.pk %}" alt="">
                        </div>
                        <div class="timeline-event-card card">
                            <div class="card-body">
                                <p class="text-primary mb-0">{{ je.start }} - {% if je.end %}{{ je.end }}{% else %}{% trans "today" %}{% endif %}</p>
                                <h2 class="fs-2">{{ je.position }}</h2>
                                <div>
                                    <div style="color: #{{ je.company.color }};">{{ je.company.name }}</div>
                                    <div class="text-secondary">{{ je.company.location }}</div>
                                    <div class="mt-2 text-white">
                                        {% for jt in je.job_tasks.all %}
                                            <div>{{ jt.description }}</div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
        <div class="hr"></div>
        <div class="row d-flex justify-content-center mb-md-4">
            <div class="card col-md-6" id="contact-me">
                <div class="card-body">
                    <h3 class="card-title fs-2">
                        <b>
                            <i class="fa-solid fa-envelope"></i>
                            {% trans "Contact me" %}
                        </b>
                    </h3>
                    <form action="{% url 'contact' %}" method="post" id="contact-form">
                        {% csrf_token %}
                        {% for field in contact_form %}
                            <div class="form-floating mb-2">
                                {{ field }}
                                <label for="{{ field.id }}">{{ field.label }}</label>
                            </div>
                        {% endfor %}
                        <div class="d-flex justify-content-end">
                            <button class="btn btn-primary" type="submit">{% trans "Send" %}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <style>
        textarea {
            height: 10rem !important;
        }
    </style>
{% endblock %}