{include file="header.tpl"}
{include file="js.tpl"}
{include file="nav.tpl"}

<div class="container-fluid">
    <br>
    <h4>Kontakt</h4>
    <p>
        Chętnie porozmawiam o książkach.<br>
        Kontakt mile widziany!
    </p>

    {if isset($contactForm)}
        <div class="alert alert-success col-6" role="alert">
            Witaj, <strong>{$contactForm}</strong>!<br>Dziękuję za wiadomość!
        </div>
    {/if}
    {if isset($contactError)}
        <div class="alert alert-danger col-6" role="alert">
            {$contactError}
        </div>
    {/if}    
    <p>
        <a class="btn btn-secondary" data-bs-toggle="collapse" href="#contactForm" role="button" aria-expanded="false" aria-controls="contactForm">Formularz kontaktowy</a>
    </p>
    <form method="post" id="contactForm" class="collapse multi-collapse col-6">
        <div class="mb-3">
            <label class="form-label">Twoje imię</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="Twoje imię" required>
        </div>
        <div class="mb-3">
            <label class="form-label">Twój adres e-mail</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="Twój adres e-mail" required>
        </div>
        <div class="mb-3">
            <label class="form-label">Wiadomość</label>
            <textarea class="form-control" id="message" name="message" rows="4" placeholder="Napisz coś do mnie ;)" required></textarea>
        </div>
        <div class="mb-3"> 
            <button type="submit" name="contactForm" class="btn btn-secondary">Wyślij</button>
        </div>
        <input type="hidden" name="page" value="contact">
    </form>
</div>

{include file="footer.tpl"}