{% extends 'login.html.twig' %}
{% block content %}
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                    <div class="img-responsive text-center">
                        <img src="{{ event.hasLogo ? '/uploads/images/event/'~event.id~'.jpg' : '' }}" />
                    </div>
                </div>
                <div class="header">
                    <h1>{{ event.name }}</h1>
                </div>
                <div class="body">
                    <div class="row clearfix">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="header bg-grey">
                                    <h3>Rejestracja</h3>
                                </div>
                                <div class="body">
                                    {% for group in event.groups %}
                                        <div class="row clearfix">
                                            <div class="col-md-8">
                                                <h4>{{ group }}</h4>
                                                <div><h5>Wolnych miejsc <span class="badge bg-grey">{{ group.userLimit }}</span></h5></div>
                                                <div>
                                                    <h5>Zakończenie rejestracji {{ group.endDate|date('d.m.Y H:i') }}</h5>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <span class="badge bg-grey pull-left">
                                                    <h4>{{ group.price|number_format(2, ',', ' ') }}</h4>
                                                </span>
                                                {% if group.startDate|date('Y-m-d H:i') > "now"|date('Y-m-d H:i') %}
                                                    <span class="badge bg-amber waves-effect pull-right">
                                                        Nierozpoczęta
                                                    </span>
                                                {% elseif group.endDate|date('Y-m-d H:i') < "now"|date('Y-m-d H:i') %}
                                                    <span class="badge bg-red waves-effect pull-right">
                                                        Zakończona
                                                    </span>
                                                {% else %}
                                                    <a href="{{path('nordmind_app_register',{id: group.id})}}" class="btn bg-pink btn-lg waves-effect pull-right">
                                                        Zarejestruj
                                                    </a>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>

                            <div class="card">
                                <div class="header bg-grey">
                                    <h3>Opis wydarzenie</h3>
                                </div>
                                <div class="body">
                                    {% for group in event.groups %}
                                        <div class="row clearfix font-bold">
                                            {{ event.description }}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card">
                                <div class="header bg-grey">
                                    <h3>Termin i miejsce</h3>
                                </div>
                                <div class="body font-bold">
                                    <p>Data rozpoczęcia: {{event.startDate|date('d.m.Y H:i')}}</p>
                                    <p>Data zakończenia: {{event.endDate|date('d.m.Y H:i')}}</p>
                                    <p>{{ event.address }}</p>
                                </div>
                            </div>

                            <div class="card">
                                <div class="header bg-grey">
                                    <h3>Organizator</h3>
                                </div>
                                <div class="body font-bold">
                                    <p>{{systemOptions['issuer_name'].value}}</p>
                                    <p><i class="material-icons">contact_mail</i> <a href="{{systemOptions['issuer_email'].value}}">{{systemOptions['issuer_email'].value}}</a></p>
                                    <p><i class="material-icons">contact_phone</i> <a href="{{systemOptions['issuer_phone'].value}}">{{systemOptions['issuer_phone'].value}}</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-md-12">
                            <div class="body">
                                <div id="map-canvas" class="gmap"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock content %}
{% block javascript %}
    {{ parent() }}
    <script type="text/javascript">

        function initMap() {
            var lat = 54.361313;
            var lng = 18.64974;
            var uluru = {lat: lat, lng: lng};
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
                zoom: 14,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }

    </script>
    <script async defer
            src= "https://maps.googleapis.com/maps/api/js?key=AIzaSyCtrkrCR2KmIvbI-Jg35iqfGCY2zK4QxNQ&callback=initMap">

    {% endblock %}