<style>
.suggestion-list {
    position: absolute;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    max-height: 260px;
    overflow-y: auto;
    width: 100%;
    z-index: 1050;
    margin-top: 2px;
    display: none;
    padding: 0;
}
.suggestion-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
    background: #fff;
    transition: background 0.15s;
    font-size: 1rem;
    display: flex;
    align-items: center;
}
.suggestion-item:last-child {
    border-bottom: none;
}
.suggestion-item:hover, .suggestion-item.active {
    background: #e9ecef;
    color: #212529;
}
.suggestion-name {
    font-weight: 500;
    color: #0d6efd;
    margin-right: 0.5em;
}
.suggestion-details {
    font-size: 0.95em;
    color: #6c757d;
}
.suggestion-type {
    margin-right: 8px;
    color: #adb5bd;
    font-size: 1.1em;
}
.search-container { position: relative; }
</style>

<div class="row mt-4 labourer-form-container" id="labourerFormContainer">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Labourer une ville</h3>
                    <p class="card-text">
                        <i class="bi bi-info-circle" 
                           data-bs-toggle="tooltip" 
                           data-bs-placement="right"
                           data-bs-html="true"
                           title="<strong>Qu'est-ce que le labourage ?</strong><br><br>Le labourage consiste à rechercher automatiquement tous les commerces et lieux d'intérêt dans une ville sur OpenStreetMap. Cette action permet de :<br><br>- Découvrir les commerces existants<br>- Mesurer leur taux de complétion<br>- Identifier les informations manquantes<br>- Faciliter la mise à jour des données"></i>
                        Rechercher une ville pour labourer ses commerces
                    </p>
                    <form id="labourerForm">
                        <div class="search-container">
                            <input type="text" 
                                   id="citySearch" 
                                   class="form-control" 
                                   placeholder="Rechercher une ville..."
                                   autocomplete="off">
                            <div id="citySuggestions" class="suggestion-list"></div>
                        </div>
                        <input type="hidden" name="zip_code" id="selectedZipCode">
                        <button type="submit" class="btn btn-primary mt-3 btn-labourer">Labourer cette ville</button>
                    </form>
                </div>
            </div>
        </div>
    </div>