{% extends 'base.html' %}

{% load static %}

{% block content %}
    <div class="big-container">
        <div class="background">
            <img class="background-photo" src="{% static 'imgs/tlo-grafika.png' %}">

        </div>

        <p class="big-text">Tomasz Trochanowski</p>

        <p class="undertitle">Lorem ipsum dolor sit amet</p>

        <!-- <div class="single-button-container"><a href="{% url 'kontakt' %}" class="visit-button">Umów się na wizytę</a></div> -->


        <div class="imposed-container">
            <div class="imposed-container-content">
                <p class="imposed-container-header">O mnie</p>
                <p class='imposed-container-text'>{{ aboutme_text|linebreaksbr }} <a href="{% url 'o mnie' %}">Czytaj
                    dalej</a></p>
            </div>

            <div class="separator"></div>

            <div class="imposed-container-content" id="bio">
                <div class="bio">
                    <img class='bio-photo ' src="{% static 'imgs/tomasz-zdjecie.webp' %}">
                    <div class="bio-text">
                        <div class="bio-name">Tomasz Trochanowski</div>
                        <div class="bio-undertitle">LEKARZ REHABILITACJI</div>
                        <div class="bio-description">{{ shortbio_txt }}
                        </div>
                    </div>
                    <div style="clear: left;"></div>
                </div>
            </div>

            <div class="separator"></div>

            <div class="imposed-container-content">
                <div class="grid-container">
                    <a class="grid-item" href="{% url 'podology1' %}">
                        <div class="icon"><img src="{% static 'imgs/foot.png' %}"></div>
                        <p class="procedure-name">Leczenie wrastających paznokci</p>
                        <p class="procedure-desc">Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum
                            posuere. Volutpat diam ut venenatis tellus in metus.</p>
                    </a>
                    <a class="grid-item" href="{% url 'podology2' %}">
                        <div class="icon"><img src="{% static 'imgs/toe.png' %}"></div>
                        <p class="procedure-name">Plastyka wałów paznokciowych</p>
                        <p class="procedure-desc">Tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed.</p>
                    </a>
                    <a class="grid-item" href="{% url 'podology3' %}">
                        <div class="icon"><img src="{% static 'imgs/stethoscope.png' %}"></div>
                        <p class="procedure-name">Plastyka opuszki</p>
                        <p class="procedure-desc">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                            nisi.</p>
                    </a>
                    <a class="grid-item" href="{% url 'recommendations' %}">
                        <div class="icon"><img src="{% static 'imgs/letter.png' %}"></div>
                        <p class="procedure-name">Zalecenia dla pacjenta</p>
                        <p class="procedure-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                            dolore eu fugiat nulla pariatur</p>
                    </a>
                </div>
                <br>
                <br>
            </div>


        </div>
        <br><br>

        <div class="imposed-container">
            <div class="imposed-container-content" id="kontakt">
                <p class="imposed-container-header">Kontakt</p>
                <div class="contact-grid-container">
                    <div class="contact-icon"><img src="{% static 'imgs/call.png' %}"></div>
                    <p class="phone-number">+ 48 730 223 702</p>
                </div>
                <div class="contact-grid-container">
                    <div class="contact-icon"><img src="{% static 'imgs/mail.png' %}"></div>
                    <p class="phone-number">matrochanowski@gmail.com</p>
                </div>
            </div>

            <div class="imposed-container-content">
                <p class="imposed-container-header">Formularz kontaktowy:</p>
                <form action="#" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{ form.as_p }}
                    <div class="mb-3">
                        <label for="firstName" class="form-label">Imię</label>
                        <input type="text" class="form-control" id="firstName" name="first_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="lastName" class="form-label">Nazwisko</label>
                        <input type="text" class="form-control" id="lastName" name="last_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">E-mail</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="text" class="form-label">Tekst</label>
                        <textarea type="text" class="form-control" id="text" name="text" required></textarea>
                        <div class="mb-3">
                            <label for="photo" class="form-label">Zdjęcie</label>
                            <input type="file" class="form-control" id="photo" name="photo" accept="image/*">
                        </div>
                        <button type="submit" class="btn btn-primary">Wyślij</button>
                    </div>
                </form>
                {% if form_sent %}
                    <p>Formularz został pomyślnie wysłany!</p>
                {% endif %}

            </div>
        </div>
        <!-- To change -->
        <div style="padding-top: 50px">

        </div>

    </div>
{% endblock %}