{{#features}}

<style>
    .lieu-rafraichi {
        font-family: Arial, Helvetica, sans-serif;
        color: #1e1e1e;
        background: #ffffff;
        max-width: 720px;
        margin: 0 auto;
        line-height: 1.5;
    }

    /* En-tête */
    .lr-header {
        border-left: 6px solid #000091;
        padding: 10px 0 10px 16px;
        margin-bottom: 22px;
    }

    .lr-header h2 {
        margin: 0;
        color: #000091;
        font-size: 1.45rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .lr-header .commune {
        margin-top: 5px;
        color: #666666;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* Bloc informations */
    .lr-infos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 18px;
    }

    .lr-info {
        background: #f6f6f6;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        padding: 12px 14px;
        min-height: 48px;
        box-sizing: border-box;
    }

    .lr-label {
        display: block;
        color: #666666;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 3px;
    }

    .lr-value {
        display: block;
        color: #1e1e1e;
        font-size: 0.98rem;
        font-weight: 500;
    }

    /* Accessibilité */
    .lr-pmr {
        grid-column: 1 / -1;
        background: #e6f4ea;
        border-left: 4px solid #18753c;
        border-radius: 4px;
        padding: 12px 14px;
    }

    .lr-pmr .lr-label {
        color: #18753c;
    }

    .lr-pmr-ok {
        color: #18753c;
        font-weight: 700;
        font-size: 1rem;
    }

    .lr-pmr-ok i {
        margin-right: 7px;
    }

    /* Localisation */
    .lr-location {
        margin-top: 18px;
        padding: 14px;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
    }

    .lr-location-title {
        color: #000091;
        font-size: 0.9rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .lr-coordinates {
        color: #555555;
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .lr-streetview {
        display: inline-block;
        background: #000091;
        color: #ffffff !important;
        text-decoration: none !important;
        padding: 8px 14px;
        border-radius: 4px;
        font-size: 0.88rem;
        font-weight: 700;
        transition: background 0.15s ease;
    }

    .lr-streetview:hover {
        background: #1212b5;
        color: #ffffff !important;
    }

    .lr-streetview i {
        margin-right: 6px;
    }

    /* Score */
    .lr-score {
        margin-top: 20px;
        padding: 15px;
        background: #f6f6f6;
        border-radius: 4px;
    }

    .lr-score-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .lr-score-label {
        color: #555555;
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .lr-score-value {
        color: #000091;
        font-size: 1.25rem;
        font-weight: 700;
    }

    .lr-score-bar {
        width: 100%;
        height: 8px;
        background: #dddddd;
        border-radius: 10px;
        overflow: hidden;
    }

    .lr-score-progress {
        height: 100%;
        width: 0%;
        background: #000091;
        border-radius: 10px;
    }

    /* Responsive */
    @media (max-width: 550px) {
        .lr-infos {
            grid-template-columns: 1fr;
        }

        .lr-pmr {
            grid-column: auto;
        }
    }
</style>


<li id="{{feature_ol_uid}}" class="item" style="list-style:none; padding:10px;">

    <div class="lieu-rafraichi">

        <!-- EN-TÊTE -->
        <div class="lr-header">

            <h2>
                <i class="fa fa-map-marker" aria-hidden="true"></i>
                {{commune}}
            </h2>

            <div class="commune">
                {{categorie}}
            </div>

        </div>


        <!-- INFORMATIONS PRINCIPALES -->
        <div class="lr-infos">

            <div class="lr-info">
                <span class="lr-label">
                    Propriétaire
                </span>
                <span class="lr-value">
                    {{propriétaire}}
                </span>
            </div>


            <div class="lr-info">
                <span class="lr-label">
                    Gestionnaire
                </span>
                <span class="lr-value">
                    {{gestionnaire}}
                </span>
            </div>


            <div class="lr-info" style="grid-column: 1 / -1;">
                <span class="lr-label">
                    Adresse
                </span>
                <span class="lr-value">
                    <i class="fa fa-location-arrow"
                       aria-hidden="true"
                       style="color:#000091; margin-right:6px;">
                    </i>
                    {{adresse}}
                </span>
            </div>


            {{#capacité d’accueil}}
            <div class="lr-info">
                <span class="lr-label">
                    Capacité d'accueil
                </span>
                <span class="lr-value">
                    <i class="fa fa-users"
                       aria-hidden="true"
                       style="color:#000091; margin-right:6px;">
                    </i>
                    {{capacité d’accueil}} personnes
                </span>
            </div>
            {{/capacité d’accueil}}


            {{#surface}}
            <div class="lr-info">
                <span class="lr-label">
                    Surface
                </span>
                <span class="lr-value">
                    <i class="fa fa-arrows-alt"
                       aria-hidden="true"
                       style="color:#000091; margin-right:6px;">
                    </i>
                    {{surface}} m²
                </span>
            </div>
            {{/surface}}


            <!-- ACCESSIBILITÉ PMR -->
            {{#accès_pmr}}
            <div class="lr-pmr">

                <span class="lr-label">
                    Accessibilité
                </span>

                <span class="lr-pmr-ok">
                    <i class="fa fa-check-circle"
                       aria-hidden="true">
                    </i>
                    Accès PMR
                </span>

            </div>
            {{/accès_pmr}}

        </div>


        <!-- LOCALISATION -->
        <div class="lr-location">

            <div class="lr-location-title">
                <i class="fa fa-compass" aria-hidden="true"></i>
                Localisation
            </div>

            <div class="lr-coordinates">
                Longitude : {{longitude}}
                &nbsp;&nbsp;|&nbsp;&nbsp;
                Latitude : {{latitude}}
            </div>

            <a
                class="lr-streetview"
                href="https://www.google.com/maps/@?api=1&map_action=pano&viewpoint={{latitude}},{{longitude}}"
                target="_blank"
                rel="noopener noreferrer">

                <i class="fa fa-street-view" aria-hidden="true"></i>
                Voir dans Street View

            </a>

        </div>


        <!-- SCORE -->
        <div class="lr-score">

            <div class="lr-score-header">

                <span class="lr-score-label">
                    Score de correspondance
                </span>

                <span
                    id="score-value-{{feature_ol_uid}}"
                    class="lr-score-value">
                    —
                </span>

            </div>

            <div class="lr-score-bar">
                <div
                    id="score-progress-{{feature_ol_uid}}"
                    class="lr-score-progress">
                </div>
            </div>

            <!-- Conversion du score 0.xxxx en pourcentage -->
            <script>
                (function() {

                    var score = parseFloat("{{result_score}}");

                    if (!isNaN(score)) {

                        var percentage = score * 100;

                        var formatted =
                            percentage.toLocaleString('fr-FR', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2
                            });

                        var valueElement =
                            document.getElementById(
                                "score-value-{{feature_ol_uid}}"
                            );

                        var progressElement =
                            document.getElementById(
                                "score-progress-{{feature_ol_uid}}"
                            );

                        if (valueElement) {
                            valueElement.innerHTML = formatted + " %";
                        }

                        if (progressElement) {
                            progressElement.style.width =
                                Math.min(percentage, 100) + "%";
                        }
                    }

                })();
            </script>

        </div>

    </div>

</li>

{{/features}}