{% extends "base.html" %}

{% block page_title %}.: Course's details :.{% endblock %}

{% block title %}Course{% endblock %}

{% block content %}

<hr class="m-t">

<div class="row">
    <div class="col-md-8">
        <div id="map">
        </div>
        <br />
        <span id="comment" class="information">
            {{ course.to_markdown | safe }}
        </span>
        {% if date %}
        <h3>{{ date }}</h3>
        {% for todo in toudou.items %}
            <h5>{{ todo.0 }}</h5>
            <ul>
                {% for skill in todo.1 %}
                <li><a href="/skill/{{ skill.id }}">{{ skill.longLabel }}</a></li>
                {% endfor %}
            </ul>
        {% endfor %}
        {% endif %}
    </div>
    <div class="col-md-4">
        <table class="table table-condensed">
            <thead>
                <tr>
                <td><h3>{{ course.club.name }}</h3> <h5>({{ course.get_iso_day_number_display }})</h5></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <address>
                        {{ course.club.place.address }}<br \>
                        {{ course.club.place.postal }} {{ course.club.place.city }}
                        </address>
                    </td>
                </tr>
                    <td>{{ course.datebegin }} - {{ course.dateend }}</td>
                </tr>
                <tr>
                    <td>{{ course.hour_begin }} - {{ course.hour_end }}</td>
                </tr>
                <tr>
                    <td>
                        <h6 class="dashhead-subtitle">Coache(s)</h6>
                        {% for trainer in course.trainers.all %}
                            {{ trainer }}
                        {% endfor %}
                    </td>
                </tr>
                <tr>
                    <td>
                        <h6 class="dashhead-subtitle">Jumpers</h6>
                        {% for gymnast in gymnasts %}
                            <a href="/gymnast/{{ gymnast.id }}">{{ gymnast }}</a><br />
                        {% endfor %}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

<style>
    #map {
        width: 100%;
        height: 300px;
    }
</style>

<!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap" async defer></script> -->
<script type="text/javascript">

    function initialize()
    {
        // var geocoder = new google.maps.Geocoder();
        // var address = '{{ course.club.place.address }}, {{ course.club.place.postal }} {{ course.club.place.city }}';
        // var map = new google.maps.Map(document.getElementById('map'), {
        //     center: new google.maps.LatLng(44.5403, -78.5463),
        //     zoom: 11,
        //     mapTypeId: google.maps.MapTypeId.ROADMAP
        // });

        // geocoder.geocode({'address': address}, function(results, status) {
        //     if (status === google.maps.GeocoderStatus.OK) {
        //         map.setCenter(results[0].geometry.location);
        //         var marker = new google.maps.Marker({
        //             map: map,
        //             position: results[0].geometry.location
        //         });
        //     } else {
        //         alert('Geocode was not successful for the following reason: ' + status);
        //     }
        // });
    }

    // google.maps.event.addDomListener(window, 'load', initialize);
</script>

{% endblock %}