@extends("app.layout.base")
@extends("app.layout.header")
@section("title")
    Booking Liste
@endsection

@section("content")
    <main>
        <h1 class="text-center sde-blue mb-0">Booking Liste</h1>
        <div class="col w-100 mt-auto">
            <div class="calendar-container">
                <div class="calendar-container__header">
                    <button id="week-previous" class="calendar-container__btn calendar-container__btn--left" title="Previous">
                        <i class="icon ion-ios-arrow-back"></i>
                    </button>
                    <h2 id="month" class="calendar-container__title">{Måned} {År}</h2>
                    <button id="week-next" class="calendar-container__btn calendar-container__btn--right" title="Next">
                        <i class="icon ion-ios-arrow-forward"></i>
                    </button>
                </div>
                <div class="calendar-container__body">
                    <div id="calendar" class="calendar-table">
                        <div class="calendar-table__header calendar-table__row">
{{--                            <div class="">--}}
                                <div class="calendar-table__col">Mon</div>
                                <div class="calendar-table__col">Tue</div>
                                <div class="calendar-table__col">Wed</div>
                                <div class="calendar-table__col">Thu</div>
                                <div class="calendar-table__col">Fri</div>
                                <div class="calendar-table__col">Sat</div>
                                <div class="calendar-table__col">Sun</div>
{{--                            </div>--}}
                        </div>
                        <div class="calendar-table__body">
                            <div class="calendar-table__row">
                                <div class="calendar-table__col calendar-table__inactive">
                                    <div class="calendar-table__item">
                                        <span>30</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col calendar-table__today">
                                    <div class="calendar-table__item">
                                        <span>1</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>2</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>3</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>4</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>5</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>6</span>
                                    </div>
                                </div>
                            </div>
                            <div class="calendar-table__row">
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>7</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>8</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>9</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>10</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>11</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>12</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>13</span>
                                    </div>
                                </div>
                            </div>
                            <div class="calendar-table__row">
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>14</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>15</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>16</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>17</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>18</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>19</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>20</span>
                                    </div>
                                </div>
                            </div>
                            <div class="calendar-table__row">
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>21</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>22</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>23</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>24</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>25</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>26</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>27</span>
                                    </div>
                                </div>
                            </div>
                            <div class="calendar-table__row">
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>28</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>29</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>30</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col">
                                    <div class="calendar-table__item">
                                        <span>31</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col calendar-table__inactive">
                                    <div class="calendar-table__item">
                                        <span>1</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col calendar-table__inactive">
                                    <div class="calendar-table__item">
                                        <span>2</span>
                                    </div>
                                </div>
                                <div class="calendar-table__col calendar-table__inactive">
                                    <div class="calendar-table__item">
                                        <span>3</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="events-container">
                <span class="events__title">Tider</span>
                <select id="events" class="events__list">
{{--                    <li class="events__item">--}}
{{--                        <div class="events__item--left">--}}
{{--                            <span class="events__name">Vaskemaskine Tid</span>--}}
{{--                            <span class="events__date">{Dato}</span>--}}
{{--                        </div>--}}
{{--                        <span class="events__tag">Book</span>--}}
{{--                    </li>--}}
{{--                    <li class="events__item">--}}
{{--                        <div class="events__item--left">--}}
{{--                            <span class="events__name">Vaskemaskine Tid</span>--}}
{{--                            <span class="events__date">{Dato}</span>--}}
{{--                        </div>--}}
{{--                        <span class="events__tag">Book</span>--}}
{{--                    </li>--}}
                </select>
            </div>
        </div>
    </main>
@endsection