{% extends 'base.html.twig' %}

{% set title = 'New meeting' %}

{% block doctype %}
    {% block stylesheets %}
        {{ parent() }}
        <link href="{{ asset('build/css/createMeeting.css') }}" rel="stylesheet"/>
        <link href="{{ asset('build/css/fontawesome.css') }}" rel="stylesheet"/>
    {% endblock %}
    {% block tab_name %}
        <title>M'A :: New meeting</title>
    {% endblock %}
{% endblock %}
{% block body %}
    {% block javascripts %}
        {{ parent() }}
        <script src="{{ asset('build/js/meeting.js') }}"></script>
        <script type="text/javascript" src="{{ asset('build/js/createMeeting.js') }}"></script>
    {% endblock %}
    {% block main %}
        {{ parent() }}
        {% block alertMessage %}
            <div class="alert-msg hidden">
                <p class="alert-msg-title"></p>
                <p class="alert-msg-text"></p>
            </div>
        {% endblock %}
        {% block form %}
            <div class="popup-bg">
            </div>
            <div id="popup-add-participant" class="popup">
                <p class="popup-title">Add an attendee</p>
                <div class="popup-content">
                    <input id="popup-lastname" type="text" placeholder="Last name"/>
                    <input id="popup-firstname" type="text" placeholder="First name"/>
                    <input id="popup-mail" type="text" placeholder="Email"/>
                    <div id="existing-attendee-div">
                        <p class="popup-subtitle">Or select an existing one</p>
                        <select id="existing-attendee-select">
                            <option>Select an existing attendee...</option>
                        </select>
                    </div>
                    <button class="form-btn">Add to the meeting</button>
                </div>
            </div>
            <div id="data-zone">
                <div id="zone-1">
                    <div class="form-subtitles-div">
                        <p class="form-subtitles">Meeting headers</p>
                    </div>
                    {{ form_start(form) }}
                    {{ form_errors(form) }}
                    <div id="m_title">
                        <p>Meeting title</p>
                        <input type='text' id='meeting-title' placeholder='Meeting title'/>
                        {#{{ form_widget(form.title,
                        {
                            'attr':
                            {
                                'type': 'text',
                                'id': 'meeting-title',
                                'placeholder' : 'Titre de la réunion'
                            }
                        })
                        }}#}
                    </div>
                    <div id="m_start_date">
                        <p>Start datetime</p>
                        <input type='datetime-local' id='meeting-start-date'/>
                        {#{{ form_widget(form.date,
                            {
                                'attr':
                                {
                                    'type': 'date',
                                    'id': 'meeting-start-date'
                                }
                            })
                        }}#}
                    </div>
                    <div id="m_end_date">
                        <p>End datetime</p>
                        <input type='datetime-local' id='meeting-end-date'/>
                        {#{{ form_widget(form.date,
                            {
                                'attr':
                                {
                                    'type': 'date',
                                    'id': 'meeting-end-date'
                                }
                            })
                        }}#}
                    </div>
                    <div id="m_room">
                        <p>Room</p>
                        <input type='text' id='meeting-room' placeholder='Where the meeting takes place'/>
                        {#{{ form_widget(form.room,
                            {
                                'attr':
                                {
                                    'type': 'text',
                                    'id': 'meeting-room',
                                    'placeholder' : 'Salle de la réunion'
                                }
                            })
                        }}#}
                    </div>
                </div>
                <div id="zone-2">
                    <div class="form-subtitles-div">
                        <p class="form-subtitles">Meeting body</p>
                    </div>
                    <div id="m_desc">
                        <p>Description</p>
                        <textarea type='text' id='meeting-desc' placeholder='A quick preview of the meeting'></textarea>
                        {#{{ form_widget(form.desc,
                            {
                                'attr':
                                {
                                    'type': 'text',
                                    'id': 'meeting-desc',
                                    'placeholder' : 'Description de la réunion'
                                }
                            })
                        }}#}
                    </div>
                    <div id="m_order">
                        <p>Day orders</p>
                        <textarea type='text' id='meeting-day-order' placeholder='Topic 1, Topic 2, Topic 3... (WARNING: separate each topic by a comma)'></textarea>
                        {#{{ form_widget(form.day_order,
                            {
                                'attr':
                                {
                                    'type': 'text',
                                    'id': 'meeting-day-order',
                                    'placeholder' : 'Sujets à aborder (séparer chaque sujet par une virgule)'
                                }
                            })
                        }}#}
                    </div>
                </div>
                <div id="zone-3">
                    <div class="form-subtitles-div">
                        <p class="form-subtitles">Meeting attendees</p>
                    </div>
                    <div id="icons">
                        <p>Attendees</p>
                        <i id="add" class="fas fa-plus-circle"></i>
                        <i id="remove" class="fas fa-minus-circle"></i>
                        <i id="edit" class="fas fa-edit"></i>
                    </div>
                    <table>
                        <tr>
                            <th>First name</th>
                            <th>Last name</th>
                            <th>Email</th>
                        </tr>
                        <img id="hidden-cross" style="display: none" src="{{ asset('build/images/croix_rouge.png') }}"/>
                    </table>
                    <div id="btn-actions">
                        <button type="button" class="form-btn" onclick="createMeeting();">Create the meeting</button>
                        {#{{ form_widget(form.submit,
                            {
                                'attr':
                                {
                                    'type': 'button',
                                    'id': false,
                                    'class' : 'form-btn'
                                }
                            })
                        }}#}
                    </div>
                </div>
            </div>
        {% endblock %}
    {% endblock %}
{% endblock %}