<!-- begin::Quick Sidebar -->
<a href="javascript:;" class="kt-quick-panel__close quick-panel-action-button" id="getting_started_close" (click)="unPin()">
    <i class="flaticon2-delete"></i>
</a>
<a href="javascript:;" class="quick-panel-action-button page-quick-sidebar-pinner">
    <i class="fa fa-map-pin" [attr.aria-label]="l('Pin')"></i>
</a>
<div class="kt-quick-panel__content">
    <div class="kt-portlet__body">
        <div class="col-md-12 text-center">                
            <span class="flaticon-rocket" style="font-size: 110px; color: #111111;"></span>
        </div>
        <div class="col-md-12 text-center">
            <h2 style="font-weight: 550 !important; color: #111111 !important;">{{"LetsGetStarted" | localize}}</h2>  
        </div>
        <br>
        <div class="p-2 mx-4 row divStarted">
            <div class="col-md-2">
                <i class="flaticon2-settings" style="font-size: 25px;" *ngIf="!showAccountsIcon" ></i>
                <i class="flaticon2-check-mark" style="font-size: 25px; color: #1CC9B6" *ngIf="showAccountsIcon"></i> 
            </div>  
            <div class="col-md-10" style="padding-top: 7px;">
                <span style="font-size: 15px;">{{"ConfigureAccounts" | localize}}</span>  
            </div>
        </div>
        <div class="p-2 mx-4 row divStarted" (click)="showLocationModal(true)">
            <div class="col-md-2">
                <i class="flaticon2-settings" style="font-size: 25px;" *ngIf="!showLocationIcon" ></i>
                <i class="flaticon2-check-mark" style="font-size: 25px; color: #1CC9B6" *ngIf="showLocationIcon"></i>  
            </div>
            <div class="col-md-10" style="padding-top: 7px;">
                <span style="font-size: 15px;" tooltip="Add Location Zone" >{{"AddOperatingLocationZone" | localize}}</span>  
            </div>
        </div>
        <div class="p-2 mx-4 row divStarted" (click)="showPackageTypeModal(true)">
            <div class="col-md-2">
                <i class="flaticon2-settings" style="font-size: 25px;" *ngIf="!showPackageTypeIcon" ></i>
                <i class="flaticon2-check-mark" style="font-size: 25px; color: #1CC9B6" *ngIf="showPackageTypeIcon"></i> 
            </div>
            <div class="col-md-10" style="padding-top: 7px;">
                <span style="font-size: 15px;" tooltip="{{'AddPackageType' | localize}}">{{"AddPackageType" | localize}}</span>  
            </div>
        </div>
        <div class="p-2 mx-4 row divStarted" (click)="showFleetModal(true)">
            <div class="col-md-2">
                <i class="flaticon2-settings" style="font-size: 25px;" *ngIf="!showFleetIcon" ></i>
                <i class="flaticon2-check-mark" style="font-size: 25px; color: #1CC9B6" *ngIf="showFleetIcon"></i> 
            </div>
            <div class="col-md-10" style="padding-top: 7px;">
                <span style="font-size: 15px;" tooltip="{{'AddFleet' | localize}}">{{"ConfigureFleet" | localize}}</span>  
            </div>
        </div>
        <div class="p-2 mx-4 row divStarted" (click)="showDriverModal(true)">
            <div class="col-md-2">
                <i class="flaticon2-settings" style="font-size: 25px;" *ngIf="!showDriverIcon" ></i>
                <i class="flaticon2-check-mark" style="font-size: 25px; color: #1CC9B6" *ngIf="showDriverIcon"></i> 
            </div>
            <div class="col-md-10" style="padding-top: 7px;">
                <span style="font-size: 15px;" tooltip="{{'AddDriver' | localize}}">{{"ConfigureDriver" | localize}}</span>  
            </div>
        </div>
        <div class="p-2 mx-4 row divStarted" (click)="showContactsModal(true)">
            <div class="col-md-2">
                <i class="flaticon2-settings" style="font-size: 25px;" *ngIf="!showContactsIcon" ></i>
                <i class="flaticon2-check-mark" style="font-size: 25px; color: #1CC9B6" *ngIf="showContactsIcon"></i> 
            </div>
            <div class="col-md-10" style="padding-top: 7px;">
                <span style="font-size: 15px;" tooltip="{{'AddContact' | localize}}">{{"ConfigureManagersAndUsersOptional" | localize}}</span>  
            </div>
        </div>
        <div class="p-2 mx-4 row divStarted">
            <div class="col-md-2">
                    <i class="flaticon2-settings" style="font-size: 25px;" *ngIf="!showContactsIcon" ></i>
                    <i class="flaticon2-check-mark" style="font-size: 25px; color: #1CC9B6" *ngIf="showContactsIcon"></i> 
            </div>
            <div class="col-md-10" style="padding-top: 7px;">
                <span style="font-size: 15px;" tooltip="{{'ConfigureCorporateIdentityOptional' | localize}}">{{"ConfigureCorporateIdentityOptional" | localize}}</span>  
            </div>
        </div> 
        <div class="mt-4 col-md-12 text-center" >
            <p class="text-danger" *ngIf="showFleetIcon && showPackageTypeIcon && showDriverIcon && showLocationIcon && showContactsIcon">*The Button will disappear, validation only for the button*</p>
            <button class="btn btn-primary btn-elevate btn-pill" style="font-weight: 550 !important; width: 250px; height: 50px; font-size: 20px;" *ngIf="!showFleetIcon || !showPackageTypeIcon || !showDriverIcon || !showLocationIcon || !showContactsIcon" disabled>{{"LetsGo" | localize}}</button>
            <button class="btn btn-primary btn-elevate btn-pill" style="font-weight: 550 !important; width: 250px; height: 50px; font-size: 20px;" *ngIf="showFleetIcon && showPackageTypeIcon && showDriverIcon && showLocationIcon && showContactsIcon && showCorporateIdentity">{{"LetsGo" | localize}}</button>
              
        </div> 
    </div>
    

</div>


<!-- end::Quick Sidebar -->