{% extends '@RxConnexion/Layouts/global.html.twig' %}

{% block body %}

    <style>
        body {
            //background: url('{{ asset('bundles/rxgrab/images/results-page-bg.jpg') }}');
            //background-attachment: fixed;
            //background-repeat: no-repeat;
            -webkit-background-size: 100% 100%;
            -moz-background-size: 100% 100%;
            -o-background-size: 100% 100%;
            background-size: 100% 100%;
        }
    </style>

    {% include '@RxConnexion/Layouts/fixed_header_only.html.twig' %}

    <div class="row">
        <div class="xxlarge-12 xlarge-12 large-12 medium-12 small-12 columns">
            <div class="rxgrab-search-result-list-container">
                <ul class="large-block-grid-5 medium-block-grid-2 small-block-grid-1">
                    {% for healthFacility in healthFacilities %}
                        <li>
                            <div class="rxgrab-search-result-list">
                                <div class="image-container">
                                    {% if healthFacility.photowebpath is not empty %}
                                        {# <img src="{{ global_url ~ '/' ~ healthFacility.photowebpath }}" alt="{{ healthFacility.description }}'s Photo" /> #}
                                         <img src="{{ path('main_file_download', {type: 'healthFacility', id: healthFacility.id|base64Encode }) }}'s Photo" />
                                    {% else %}
                                        <img src="{{ asset('/bundles/rxgrab/images/no-photo.jpg') }}"/>
                                    {% endif %}
                                </div>
                                <div class="details-container">
                                    <div>{{ healthFacility.id }}</div>
                                    <div><strong>{{ healthFacility.description }}</strong></div>
                                    <div>{{ healthFacility.healthfacilitytype.description }}</div>
                                    <div>{{ healthFacility.address }}</div>
                                    {% if healthFacility.mobileno != '' or healthFacility.mobilenotwo != '' or healthFacility.mobilenothree != '' %}
                                    <div>
                                        {% if healthFacility.mobileno != '' %}
                                            <p>{{ healthFacility.mobileno }}</p>
                                        {% endif %}
                                        {% if healthFacility.mobilenotwo != '' %}
                                            <p>{{ healthFacility.mobilenotwo }}</p>
                                        {% endif %}
                                        {% if healthFacility.mobilenothree != '' %}
                                            <p>{{ healthFacility.mobilenothree }}</p>
                                        {% endif %}
                                    </div>
                                    {% endif %}
                                    {% if healthFacility.phoneno != '' or healthFacility.phonenotwo != '' or healthFacility.phonenothree != '' %}
                                    <div>
                                        {% if healthFacility.phoneno != '' %}
                                            <p>{{ healthFacility.phoneno }}</p>
                                        {% endif %}
                                        {% if healthFacility.phonenotwo != '' %}
                                            <p>{{ healthFacility.phonenotwo }}</p>
                                        {% endif %}
                                        {% if healthFacility.phonenothree != '' %}
                                            <p>{{ healthFacility.phonenothree }}</p>
                                        {% endif %}
                                    </div>
                                    {% endif %}
                                    {% if healthFacility.email != '' or healthFacility.emailtwo != '' or healthFacility.emailthree != '' %}
                                    <div>
                                        {% if healthFacility.email != '' %}
                                            <p>{{ healthFacility.email }}</p>
                                        {% endif %}
                                        {% if healthFacility.emailtwo != '' %}
                                            <p>{{ healthFacility.emailtwo }}</p>
                                        {% endif %}
                                        {% if healthFacility.emailthree != '' %}
                                            <p>{{ healthFacility.emailthree }}</p>
                                        {% endif %}
                                    </div>
                                    {% endif %}
                                    <span><a href="{{ path('rx_grab_front_end_search_result_view_details', {id: healthFacility.id}) }}">View Details</a></span>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    {#
    <div id="map-canvas-container"><div id="map-canvas__"></div></div>

    <script language="javascript">
        //<![CDATA[
            jQ(document).ready(function(){

                if(typeof google !== 'undefined') {

                    map = new google.maps.Map(document.getElementById('map-canvas'), {
                        zoom: 6,
                        center: new google.maps.LatLng(11.6978351, 122.6217543)
                    });

                    {% for healthFacility in healthFacilities %}

                        {% if healthFacility.geolatitude != '' and healthFacility.geolongitude != '' %}

                            new google.maps.Marker({
                                position: new google.maps.LatLng({{ healthFacility.geolatitude }}, {{ healthFacility.geolongitude }}),
                                map: map,
                                title: "{{ healthFacility.description }}'s location"
                            });

                        {% endif %}

                    {% endfor %}
                }

            });
        //]]>
    </script>
    #}

{% endblock %}