<style>
    .custom-map-control-button {
        appearance: button;
        background-color: #fff;
        border: 0;
        border-radius: 2px;
        box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        margin: 10px;
        padding: 0 0.5em;
        height: 40px;
        font: 400 18px Roboto, Arial, sans-serif;
        overflow: hidden;
    }
    .custom-map-control-button:hover {
        background: #ebebeb;
    }

    .locationMap {
        height:600px;
        width:100%;
        margin-top: 20px;
    }

    .city-remove {
        height: 30px !important;
    }

    .pin-lps {
        height: 25px;
        margin-left: 12px;
    }

    .legende {
        margin-top: 25px;
        text-align: center;
        font-style: italic;
    }

</style>


{form name='lps-area-cities-update'}
<div class="form-container">

    {if $form_error}
    <div class="alert alert-danger">{$form_error_message}</div>
    {/if}

    <div class="row">
        <div class="col-md-4">

            {loop name="area" type="lps_area" id="$area_id"}
            <form action="{url path='/admin/module/LivraisonParSecteurs/edit' area_id={$area_id}}" method="POST" class="clearfix" {form_enctype form=$form}>
                {form_hidden_fields form=$form}

                {form_field form=$form field="area_id"}
                <input type="hidden" name="{$name}" value="{$area_id}"/>
                {/form_field}

                <div class="general-block-decorator">
                    <div class="table-responsive">
                        <table class="table table-striped table-condensed" id="areas-table">
                            <thead>
                                <tr>
                                    <th>{intl l="Zipcode" d="livraisonparsecteurs"}</th>
                                    <th>{intl l="City" d="livraisonparsecteurs"}</th>
                                    <th class="pull-right">
                                        <div>
                                            {loop name="auth-delete" type="auth" role="ADMIN" resource="admin.lps.cities" access="CREATE" module="LivraisonParSecteurs"}
                                            <a class="btn btn-default btn-primary city-add"
                                               title="{intl l='Add a new city' d='livraisonparsecteurs'}"
                                               data-target="#area-cities-add" data-toggle="modal">
                                                <i class="glyphicon glyphicon-plus-sign"></i>
                                            </a>
                                            {/loop}
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {loop name="cities" type="lps_area_cities" area_id="$area_id" order="title"}
                                <tr>
                                    <td>{$ZIPCODE}</td>
                                    <td>{$TITLE}{if $LATITUDE eq '' or $LONGITUDE eq ''}<img src="{image file='assets/img/pin.svg' source='LivraisonParSecteurs'}" title="Pas de coordonnées pour cette commune" alt="Pas de coordonnées" class="pin-lps" />{/if}</td>
                                    <td class="actions">
                                        <div class="btn-group" role="group">
                                            {loop name="auth-delete" type="auth" role="ADMIN" resource="admin.lps.cities" access="DELETE" module="LivraisonParSecteurs"}
                                            <a class="btn btn-danger btn-responsive cities-remove" title="{intl l='Remove this city'}" data-target="#area-cities-remove" data-toggle="modal" data-id="{$ID}">
                                                <i class="glyphicon glyphicon-trash"></i>
                                            </a>
                                            {/loop}
                                        </div>
                                    </td>
                                </tr>
                                {/loop}
                                {elseloop rel="cities"}
                                <tr>
                                    <td colspan="1000">
                                        <div class="alert alert-info">
                                            {intl l="There is no city delivered in this area" d="livraisonparsecteurs"}
                                        </div>
                                    </td>
                                </tr>
                                {/elseloop}
                            </tbody>
                        </table>
                    </div>
                </div>

                <table id="coordinates" class="hidden">
                    <thead></thead>
                    <tbody>
                    {loop name="cities-coordinates" type="lps_area_cities" area_id="$area_id"}
                        <tr>
                            <td>{$LATITUDE}</td>
                            <td>{$LONGITUDE}</td>
                            <td>{$TITLE}</td>
                        </tr>
                    {/loop}
                    </tbody>
                </table>

                <input id="attr-city-id-remove" type="hidden" value=""/>

            </form>
            {/loop}
        </div>

        <div class="col-md-8">
            <input type="hidden" id="map-center-lon" value="2.2667287624488397" />
            <input type="hidden" id="map-center-lat" value="50.749980292425974" />

            <div id="map" class="locationMap"></div>
            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBb07YA_unrh5w821I1xHxbeYb5KCF_WaM&libraries=&v=weekly" async></script>

            <caption class="clearfix">
                <div class="legende">NB : Les communes sans coordonnées GPS n'apparaitront pas sur la carte ci-dessus.</div>
            </caption>
        </div>
    </div>
</div>
{/form}
