templates/web/pages/vzpominky-form.html.twig line 1

{% extends "web/base.html.twig" %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('check-uploaded-file-size') }}
{% endblock %}

{% block title %}
    {{"Sdílet vzpomínky | Tohle jsme prožili"}}
{% endblock %}


{% block body %}
    <section class="pt-7">
        <div class="container container--smaller">
            <div class="row">
                <div class="col-12">
                    <h1>Sd&iacute;let vzpom&iacute;nky</h1>
                    {% for msg in app.flashes('success') %}
                        <h3 class="form-success">
                        {{ msg }}
                        </h3>
                    {% endfor %}
                    {% for msg in app.flashes('error') %}
                        <h3 class="form-error">
                        {{ msg }}
                        </h3>
                    {% endfor %}
                    <p class="perex my-5">
                        Tohle jste prožili? Chcete se s námi podělit o své zkušenosti a zážitky? Nabízíme vám prostor pro zveřejnění vzpomínek přímo na našem webovém portálu.
                    </p>
                    <p class="mb-5">Va&scaron;e vzpom&iacute;nky n&aacute;m můžete poslat na e-mail <b>info@tohlejsmeprozili.cz</b> <br />nebo pomoc&iacute; webov&eacute;ho formul&aacute;ře:</p>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    {#
                    <form action="">
                        <div class="story">
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <label for="name" class="story__label">Va&scaron;e jm&eacute;no</label>
                                    <input type="text" class="input" />
                                </div>

                                <div class="col-12 col-md-6">
                                    <label for="email" class="story__label">V&aacute;&scaron; e-mail</label>
                                    <input type="email" name="email" id="email" class="input" />
                                </div>

                                <div class="col-12">
                                    <label for="message" class="story__label">Va&scaron;e vzpom&iacute;nka, nebo koment&aacute;ř:</label>
                                    <textarea class="textarea" name="message" id="message" cols="30" rows="20"></textarea>
                                </div>

                                <div class="col-12">
                                    <div class="story__label">Přiložit můžete tak&eacute; soubory (např obr&aacute;zky, audio nahr&aacute;vy nebo videa) do 50 MB. <br />
                                        <a class="story__link" href="#">Jak poslat vět&scaron;&iacute; soubor?</a>
                                    </div>
                                    <p class="story__file-text">Přet&aacute;hněte soubory my&scaron;&iacute; nebo využijte tlač&iacute;tko</p>
                                    <label for="file" class="story__file">
                                        <span class="btn-transparent">Vybrat soubor</span>
                                        <input type="file" name="file" id="file" />
                                    </label>
                                </div>

                                <div class="col-12 d-flex align-items-center gap-2 mb-5">
                                    <input type="checkbox" name="osobniUdaje" id="osobniUdaje" />
                                    <label class="story__label fw-regular mb-0" for="osobniUdaje">Souhlas&iacute;m se zpracov&aacute;n&iacute;m osobn&iacute;ch &uacute;dajů</label>
                                </div>

                                <div class="col-12 d-flex align-items-top gap-2 mb-5">
                                    <input type="checkbox" name="autorPrava" id="autorPrava" />
                                    <label class="story__label fw-regular mb-0" for="autorPrava">Prohla&scaron;uji, že jsem vlasn&iacute;k autorsk&yacute;ch pr&aacute;v k přiložen&yacute;m meteri&aacute;lům + souhlas s publikov&aacute;n&iacute;m obsahu</label>
                                </div>

                                <button type="submit" class="btn-black">Odeslat</button></div>
                        </div>
                    </form>
                    #}

                    {% if is_granted('IS_AUTHENTICATED_FULLY') == true %}
                        {% set userName = app.user.name  %}
                        {% set userMail = app.user.mail  %}
                    {% else %}
                        {% set userName = null  %}
                        {% set userMail = null  %}
                    {% endif %}

                    {{ form_start(form) }}
                        <div class="story">
                            <div class="row">
                                <div class="col-12 mb-6">
                                    <h3>{{ form_errors(form) }}</h3>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label for="name" class="story__label">{{form_label(form.name)}}</label>
                                    {{ form_widget(form.name, {'attr' : {'class': 'input','value' : userName }}) }}
                                </div>

                                <div class="col-12 col-md-6">
                                    <label for="mail" class="story__label">{{ form_label(form.mail) }}</label>
                                    {{ form_widget(form.mail, {"attr":{ "class" : "input", 'value' : userMail }}) }}
                                </div>

                                <div class="col-12">
                                    <label for="message" class="story__label">Va&scaron;e vzpom&iacute;nka nebo koment&aacute;ř:</label>
                                    {{ form_widget(form.content, {"attr" : { "class" : "textarea", "cols" : 30, "rows" : 20 }}) }}
                                </div>

                                <div class="col-12">
                                    <div class="story__label">{{ form_label(form.files) }}<br />
                                        <p>Větší soubor doporučujeme poslat např. pomocí služby <a class="story__link" href="https://uschovna.cz/">uschovna.cz</a>.</p>
                                        {#
                                        <a class="story__link" href="#">Jak poslat vět&scaron;&iacute; soubor?</a>
                                        #}
                                    </div>
                                    <p class="story__file-text">Přet&aacute;hněte soubory my&scaron;&iacute; nebo využijte tlač&iacute;tko.</p>
                                    <label for="file" class="story__file">
                                        <span class="btn-transparent">Vybrat soubor:</span>
                                        {{ form_widget(form.files, {"attr":{"id" : "file", "class": "upload-memory-file"}}) }}
                                    <p style="display: none;color: red" id="upload-memory-file-error">Soubory překračují maximální povolenou velikost.</p>
                                    </label>
                                </div>
                                <div class="col-12 mb-7" id="uploaded-images-list">

                                </div>

                                {#
                                <div class="col-12">
                                    <div class="story__label">Přiložit můžete také soubory (např obrázky, audio nahrávy nebo videa) do 50 MB.
                                        <br>    <a class="story__link" href="#">Jak poslat větší soubor?</a>
                                    </div>
                                    <label for="file" class="story__file mb-3">
                                        <p class="story__file-text">Přetáhněte soubory myší nebo využijte tlačítko</p>
                                        <span class="btn-transparent">Vybrat soubor</span>
                                        <input type="file" name="file" id="file">
                                    </label>
                                    <label for="file" class="story__file file-grabbed mb-3">
                                        <p class="story__file-text">Přetáhněte soubory myší nebo využijte tlačítko</p>
                                        <span class="btn-transparent">Vybrat soubor</span>
                                        <input type="file" name="file" id="file">
                                    </label>
                                    <label for="file" class="story__file upload mb-3">
                                        <p class="story__file-text">Nahrávám soubor.....</p>
                                        <!-- <span class="btn-transparent">Vybrat soubor</span> -->
                                        <input type="file" name="file" id="file">
                                    </label>
                                    <label for="file" class="story__file success mb-3">

                                        <div class="story__file-icon-wrap">
                                            <svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.5 5.96727L6.51636 10.9836L16.5 1" stroke="white" stroke-width="2"/>
                                            </svg>

                                        </div>
                                        <p class="story__file-text">Úspěšně nahráno</p>
                                        <input type="file" name="file" id="file">
                                    </label>
                                    <label for="file" class="story__file error mb-3">
                                        <div class="story__file-icon-wrap">
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.77818 10.7071C10.1687 11.0976 10.8019 11.0976 11.1924 10.7071C11.5829 10.3166 11.5829 9.68342 11.1924 9.29289L7.65685 5.75736L11.1924 2.22182C11.5829 1.8313 11.5829 1.19813 11.1924 0.807611C10.8019 0.417087 10.1687 0.417087 9.77817 0.807611L6.24264 4.34315L2.70711 0.807612C2.31658 0.417088 1.68342 0.417088 1.29289 0.807612C0.902368 1.19814 0.902369 1.8313 1.29289 2.22183L4.82843 5.75736L1.2929 9.29289C0.902371 9.68342 0.902371 10.3166 1.2929 10.7071C1.68342 11.0976 2.31658 11.0976 2.70711 10.7071L6.24264 7.17157L9.77818 10.7071Z" fill="white"/>
                                            </svg>
                                        </div>

                                        <p class="story__file-text">Nepodporovaný typ souboru</p>
                                        <input type="file" name="file" id="file">
                                    </label>
                                </div>
                                <div class="col-12 mb-7">
                                    <div class="story__uploaded-file">
                                        <img src="/assets/svg/icon-file.svg" alt="" class="story__uploaded-file-icon">
                                        <p class="story__uploaded-file-title">Celý název souboru.jpg</p>
                                        <button type="button" class="story__uploaded-file-delete">
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.77818 10.7071C10.1687 11.0976 10.8019 11.0976 11.1924 10.7071C11.5829 10.3166 11.5829 9.68342 11.1924 9.29289L7.65685 5.75736L11.1924 2.22182C11.5829 1.8313 11.5829 1.19813 11.1924 0.807611C10.8019 0.417087 10.1687 0.417087 9.77817 0.807611L6.24264 4.34315L2.70711 0.807612C2.31658 0.417088 1.68342 0.417088 1.29289 0.807612C0.902368 1.19814 0.902369 1.8313 1.29289 2.22183L4.82843 5.75736L1.2929 9.29289C0.902371 9.68342 0.902371 10.3166 1.2929 10.7071C1.68342 11.0976 2.31658 11.0976 2.70711 10.7071L6.24264 7.17157L9.77818 10.7071Z" fill="white"/>
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="story__uploaded-file">
                                        <img src="/assets/svg/icon-file.svg" alt="" class="story__uploaded-file-icon">
                                        <p class="story__uploaded-file-title">Celý název souboru.jpg</p>
                                        <button type="button" class="story__uploaded-file-delete">
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.77818 10.7071C10.1687 11.0976 10.8019 11.0976 11.1924 10.7071C11.5829 10.3166 11.5829 9.68342 11.1924 9.29289L7.65685 5.75736L11.1924 2.22182C11.5829 1.8313 11.5829 1.19813 11.1924 0.807611C10.8019 0.417087 10.1687 0.417087 9.77817 0.807611L6.24264 4.34315L2.70711 0.807612C2.31658 0.417088 1.68342 0.417088 1.29289 0.807612C0.902368 1.19814 0.902369 1.8313 1.29289 2.22183L4.82843 5.75736L1.2929 9.29289C0.902371 9.68342 0.902371 10.3166 1.2929 10.7071C1.68342 11.0976 2.31658 11.0976 2.70711 10.7071L6.24264 7.17157L9.77818 10.7071Z" fill="white"/>
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="story__uploaded-file">
                                        <img src="/assets/svg/icon-file.svg" alt="" class="story__uploaded-file-icon">
                                        <p class="story__uploaded-file-title">Celý název souboru.jpg</p>
                                        <button type="button" class="story__uploaded-file-delete">
                                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.77818 10.7071C10.1687 11.0976 10.8019 11.0976 11.1924 10.7071C11.5829 10.3166 11.5829 9.68342 11.1924 9.29289L7.65685 5.75736L11.1924 2.22182C11.5829 1.8313 11.5829 1.19813 11.1924 0.807611C10.8019 0.417087 10.1687 0.417087 9.77817 0.807611L6.24264 4.34315L2.70711 0.807612C2.31658 0.417088 1.68342 0.417088 1.29289 0.807612C0.902368 1.19814 0.902369 1.8313 1.29289 2.22183L4.82843 5.75736L1.2929 9.29289C0.902371 9.68342 0.902371 10.3166 1.2929 10.7071C1.68342 11.0976 2.31658 11.0976 2.70711 10.7071L6.24264 7.17157L9.77818 10.7071Z" fill="white"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                                #}

                                <div class="col-12 d-flex align-items-center gap-2 mb-5">
                                    {{ form_widget(form.gdpr) }}
                                    <label class="story__label fw-regular mb-0" for="gdpr">{{ form_label(form.gdpr) }}</label>
                                </div>

                                <div class="col-12 d-flex align-items-top gap-2 mb-5">
                                    {{ form_widget(form.authorRights) }}
                                    <label class="story__label fw-regular mb-0" for="authorRights">{{ form_label(form.authorRights) }}</label>
                                </div>
                                {{ form_widget(form.submit, {"attr":{"class":"btn-black"}}) }}
                            </div>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>

        </div>
    </section>
{% endblock body %}