@extends('pages.templates.login-page')

@section('head')
    @parent
    @vite('resources/scss/pages/registration/login.scss')
    @vite('resources/scss/pages/interests.scss')
@endsection

@section('login-content')
    <div id="interests">
        <div class="content">
            <div class="grid">
                <div id="image-left"></div>
                <div id="right-content">
                    <form action="{{url("/interests")}}" method="post" class="form-control">
                        <div class="form-container">
                            @csrf
                            @include('partials.form-error', ['name' => 'error-message'])
                            <h1>Apprenons à nous connaître pour optimiser votre expérience de recherche</h1>
                            <h2>Sélectionnez vos points d'intérêts</h2>
                            <div id="interests-container">
                                <div class="interest" data-interest="Le dynamisme d’un centre-ville">
                                    Le dynamisme d’un centre-ville
                                </div>
                                <div class="interest" data-interest="La nature">
                                    La nature
                                </div>
                                <div class="interest" data-interest="La proximité des transports">
                                    La proximité des transports
                                </div>
                                <div class="interest" data-interest="Un bureau pour le télétravail">
                                    Un bureau pour le télétravail
                                </div>
                                <div class="interest" data-interest="Un stationnement facile">
                                    Un stationnement facile
                                </div>
                                <div class="interest" data-interest="Un cadre de vie pour ma famille">
                                    Un cadre de vie pour ma famille
                                </div>
                                <div class="interest" data-interest="Des espaces extérieurs confortables">
                                    Des espaces extérieurs confortables
                                </div>
                            </div>

                            <input type="hidden" name="interests" value="{{implode('|', $interests)}}">
                            @include('partials.form-error', ['name' => 'interests'])

                            <div class="btn-container">
                                <input type="button" value="Valider" class="btn">
                                <a class="btn btn-back" href="{{url(route('map'))}}">Passer cette étape</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('scriptBottom')
    @parent
    @vite('resources/js/application/pages/Interest.js')
@endsection