<div class="row">
    <div class="col-12 col-lg-2">
        <h1 class="desktop-very-big">איזור אישי</h1>
    </div>
    <div class="col-12 col-lg-10 mt-lg-auto">
        <div class="list-group justify-content-center desktop-only always-flex" id="list-tab" role="tablist">
            <a class="list-group-item check-btn-lbl list-group-item-action" id="list-peronalinfo-list"
                data-toggle="list" href="#list-peronalinfo" role="tab" aria-controls="peronalinfo">פרטים אישיים</a>
            <a class="list-group-item check-btn-lbl list-group-item-action" id="list-carinfo-list" data-toggle="list"
                href="#list-carinfo" role="tab" aria-controls="carinfo">פרטי הרכב שלי</a>
            <a class="list-group-item check-btn-lbl list-group-item-action" id="list-tripinfo-list" data-toggle="list"
                href="#list-tripinfo" role="tab" aria-controls="tripinfo">הנסיעות שלי</a>
            <a class="list-group-item check-btn-lbl list-group-item-action" id="list-budget-list" data-toggle="list"
                href="#list-budget" role="tab" aria-controls="budget">התקציב שלי</a>
            <a class="list-group-item check-btn-lbl list-group-item-action" id="list-tickets-list" data-toggle="list"
                href="#list-tickets" role="tab" aria-controls="tickets">הפניות שלי</a>
        </div>
    </div>
    <div id="breadcrumbContainer" class="mobile-only hide" aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#!home" class="bold">תפריט איזור אישי</a></li>
            <li class="breadcrumb-item active" aria-current="page" class="blue"> פרטיים אישיים</li>
        </ol>
    </div>

</div>
<div class="tab-content mt-lg-5" id="nav-tabContent">
    <div class="tab-pane fade" id="list-peronalinfo" role="tabpanel" aria-labelledby="list-peronalinfo-list">
        <div class="row w-100">
            <div class="col-12 col-lg-6 px-4 mt-5">
                <h2>פרטים כלליים</h2>
                <div id="personalInfo"></div>
            </div>
            <div class="col-12 col-lg-6 px-4 mt-5">
                <h2>פרטים אישיים</h2>
                <div id="addressInfo"></div>
            </div>
        </div>
        <div class="row w-100 mt-5">
            <div class="col-12 col-lg-6 px-4 mt-5">
                <h2>פרטי חשבון בנק</h2>
                <div id="bankInfo"></div>
            </div>
            <div class="col-12 col-lg-6 px-4 mt-5">
                <h2>תקופת השתתפות בפרויקט</h2>
                <div id="joinInfo"></div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="list-carinfo" role="tabpanel" aria-labelledby="list-carinfo-list">
        <div class="row w-100">
            <div class="col-12 px-4 mt-5">
                <h2>הרכבים שלי</h2>
                <div id="myCars"></div>
            </div>
            <div class="col-12 px-4 mt-5">
                <h2>אירועים לרכב</h2>
                <div id="carInfoCarSelectDiv" class="d-block d-lg-none input-div mb-3">
                    <label for="carInfoCarSelect" class="mt-1 select-floating-label d-none">בחירת רכב</label>
                    <select id="carInfoCarSelect" name="carInfoCarSelect" class="select2">
                        <option value="-1">כל הרכבים</option>
                    </select>
                </div>
                <div id="carInfoEventSelectDiv" class="d-block d-lg-none input-div mb-3">
                    <label for="carInfoEventSelect" class="mt-1 select-floating-label d-none">בחירת אירוע</label>
                    <select id="carInfoEventSelect" name="carInfoEventSelect" class="select2">
                        <option value="-1">כל האירועים</option>
                    </select>
                </div>
                <div id="carEvents"></div>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="list-tripinfo" role="tabpanel" aria-labelledby="list-tripinfo-list">
        <div class="row w-100">
            <div class="col-12 px-4 mt-5">
                <h2>הנסיעות שלי</h2>
                <div id="carSelectDiv" class="d-block d-lg-none input-div mb-3">
                    <label for="carSelect" class="mt-1 d-none select-floating-label">בחירת רכב</label>
                    <select id="carSelect" name="carSelect" class="select2">
                        <option value="-1">כל הרכבים</option>
                    </select>
                </div>
                <div id="myTrips"></div>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="list-budget" role="tabpanel" aria-labelledby="list-budget-list">
        <div class="row w-100">
            <div class="col-12 px-4 mt-5">
                <h2>התקציב שלי</h2>
                <div id="myBudget"></div>
            </div>
        </div>
    </div>
    <div class="tab-pane fade" id="list-tickets" role="tabpanel" aria-labelledby="list-tickets-list">
        <div class="row w-100">
            <div class="col-12 px-4 mt-5">
                <h2>פניה חדשה</h2>
                <form id="ticketForm" novalidate>
                </form>
                <h2>הפניות שלי</h2>
                <div id="myTickets"></div>
            </div>
        </div>
    </div>
</div>
<script src="/js/personalzone/home.js"></script>