<div class="home-banner mb-9">
    <div class="home-banner-header d-flex justify-content-between">
        <div>
        <img src="{{rootURL}}assets/images/logo-heart-horizontal.svg" alt="Heart" class="logo-heart">
        </div>
        <div class="text-right">
        <div class="text-white link-help" onclick={{transition-to "home.about"}}><i class="bx bx-help-circle" ></i></div>
        </div>

    </div>
    <div class="home-banner-body text-right mt-8">
        <div class="home-banner-body-greet text-left text-white d-sm-flex flex-sm-column justify-content-sm-center h-100">
        <h5>Welcome Back,</h5>
        <h2>{{ this.sessionAccount.currentUser.name }}</h2>
        </div>
        <img src="{{rootURL}}assets/images/employee.png" alt="employee" class="home-banner-body-image">
    </div>
    </div>
    <div class="home-body">
    <section class="mb-9">
      <div class="container">
        <div class="row mb-10">
          <div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to ""}}>
            <div class="card mb-2">
              <div class="card-body p-4">
                <img src="{{rootURL}}assets/images/ic-leads.svg" alt="leads" class="w-100">
              </div>
            </div>
            {{#if (gt this.homeNotification.model.name 0)}}
              <p class="text-danger font-weight-bold">Leads</p>
            {{else}}
              <p>Leads</p>
            {{/if}}
          </div>
          <div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to ""}}>
            <div class="card mb-2">
              <div class="card-body p-4">
                <img src="{{rootURL}}assets/images/ic-opportunity.svg" alt="opportunity" class="w-100">
              </div>
            </div>
            {{#if (gt this.homeNotification.model.name 0)}}
              <p class="text-danger font-weight-bold">Opportunity</p>
            {{else}}
              <p>Opportunity</p>
            {{/if}}
          </div>
          <div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to ""}}>
            <div class="card mb-2">
              <div class="card-body p-4">
                <img src="{{rootURL}}assets/images/ic-event-management.svg" alt="event-management" class="w-100">
              </div>
            </div>
            {{#if (gt this.homeNotification.model.name 0)}}
              <p class="text-danger font-weight-bold">Event Management</p>
            {{else}}
              <p>Event Management</p>
            {{/if}}
          </div>
          <div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to ""}}>
            <div class="card mb-2">
              <div class="card-body p-4">
                <img src="{{rootURL}}assets/images/ic-complain-management.svg" alt="complain-management" class="w-100">
              </div>
            </div>
            {{#if (gt this.homeNotification.model.name 0)}}
              <p class="text-danger font-weight-bold">Complain Management</p>
            {{else}}
              <p>Complain Management</p>
            {{/if}}
          </div>
          <div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to "account-management"}}>
            <div class="card mb-2">
              <div class="card-body p-4">
                <img src="{{rootURL}}assets/images/ic-account-management.svg" alt="account-management" class="w-100">
              </div>
            </div>
            {{#if (gt this.homeNotification.model.accountManagementErrorCount 0)}}
              <p class="text-danger font-weight-bold">Account Management</p>
            {{else}}
              <p>Account Management</p>
            {{/if}}
          </div>
          <div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to "vehicle-management"}}>
            <div class="card mb-2">
              <div class="card-body p-4">
                <img src="{{rootURL}}assets/images/ic-vehicle-management.svg" alt="vehicle-management" class="w-100">
              </div>
            </div>
            {{#if (gt this.homeNotification.model.vehicleManagementErrorCount 0)}}
              <p class="text-danger font-weight-bold">Vehicle Management</p>
            {{else}}
              <p>Vehicle Management</p>
            {{/if}}
          </div>
          <div class="col-4 col-sm-3 col-lg-2 text-center" onclick={{transition-to "dms-item-inquiry.index-filter"}}>
            <div class="card mb-2">
              <div class="card-body p-4">
                <img src="{{rootURL}}assets/images/ic-item-inquiry.svg" alt="item-inquiry" class="w-100">
              </div>
            </div>
            {{#if (gt this.homeNotification.model.name 0)}}
              <p class="text-danger font-weight-bold">Item Inquiry</p>
            {{else}}
              <p>Item Inquiry</p>
            {{/if}}
          </div>
          <div class="col-4 col-sm-3 col-lg-2 text-center"  data-toggle="modal" data-target="#mega-menu">
            <div class="card mb-2">
              <div class="card-body p-4">
                <img src="{{rootURL}}assets/images/ic-ellips.svg" alt="more" class="w-100">
              </div>
            </div>
            <p>More</p>
          </div>
        </div>
        <div class="row mb-10">
          <div class="col">
            <div class="d-flex flex-column flex-lg-row align-items-stretched">
              <div class="p-4 bg-white my-activity__container shadow">
                <div class="d-flex align-items-center">
                  <div class="mr-4 px-0 col-auto px-0">
                    <img src="{{rootURL}}assets/images/ic-my-activity.svg" alt="my-activity" class="ic-my-activity">
                  </div>
                  <div class="text-black col px-0">
                    <h5 class="font-weight-bold">My Activity</h5>
                    <p class="m-0">Active: 4 Activities</p>
                  </div>
                  <div class="ml-4 mr-4 col-auto px-0">
                    <h3 class="m-0 text-hino-red-medium"><i class="fa fa-plus"></i></h3>
                  </div>
                </div>
              </div>
              <div class="px-4 px-lg-0">
                <div class="bg-hino-red-medium text-white px-5 py-4 d-flex justify-content-between align-items-center flex-grow-0 flex-shrink-0 my-activity__day">
                  <h5 class="font-weight-bold m-0 mr-md-5">{{moment-format (moment) 'dddd, D MMM YYYY'}}</h5>
                  <h5 class="m-0"><i class="fa fa-calendar"></i></h5>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="row mb-8">
          <div class="col-12 col-lg-4">
            <h5 class="font-weight-bold mb-4">Outstanding Transaction</h5>
            <div class="card hino-card py-7 py-lg-0" onclick={{transition-to "inbox.outstanding-transaction-dms"}}>
              <div class="card-body hino-card-body">
                {{#if this.model.isPending}}
                  <AppLoading @home={{true}} />
                {{else}}
                  <div class="d-flex justify-content-between flex-lg-column align-items-center align-items-lg-start">
                    <div class="mb-lg-3">
                      <h2>
                        {{this.model.outstandingTransactionCount}}
                        {{#if (gt this.model.outstandingTransactionNewCount 0)}}
                          <span class="badge badge-pill bg-hino-red text-white">{{ this.model.outstandingTransactionNewCount }}</span>
                        {{/if}}
                      </h2>
                    </div>
                    <img src="{{rootURL}}assets/images/logo-dms.svg" alt="DMS" class="mx-lg-auto card-logo logo-dms">
                  </div>
                {{/if}}
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-8">
            <h5 class="font-weight-bold mb-4">Outstanding Approval</h5>
            <div class="row">
              <div class="col-6">
                <div class="card hino-card" onclick={{transition-to "inbox.outstanding-approval-hoyu"}}>
                  {{#if this.model.isPending}}
                    <AppLoading @home={{true}} />
                  {{else}}
                    <div class="card-body hino-card-body">
                      <div class="d-flex flex-column">
                        <div class="mb-3">
                          <h2>
                            {{this.model.outstandingApprovalHoyuCount}}
                            {{#if (gt this.model.outstandingApprovalHoyuNewCount 0)}}
                              <span class="badge badge-pill bg-hino-red text-white">{{ this.model.outstandingApprovalHoyuNewCount }}</span>
                            {{/if}}
                          </h2>
                        </div>
                        <img src="{{rootURL}}assets/images/logo-hoyu.svg" alt="HOYU" class="mx-auto card-logo logo-hoyu">
                      </div>
                    </div>
                  {{/if}}
                </div>
              </div>
              <div class="col-6">
                <div class="hino-card card" onclick={{transition-to "inbox.outstanding-approval-dms"}} >
                  <div class="card-body hino-card-body">
                  {{#if this.model.isPending}}
                    <AppLoading @home={{true}} />
                  {{else}}
                    <div class="d-flex flex-column">
                      <div>
                        <h2 class="mb-3">
                          {{this.model.outstandingApprovalDmsCount}}
                          {{#if (gt this.model.outstandingApprovalDmsNewCount 0)}}
                            <span class="badge badge-pill bg-hino-red text-white">{{ this.model.outstandingApprovalDmsNewCount }}</span>
                          {{/if}}
                        </h2>
                      </div>
                      <img src="{{rootURL}}assets/images/logo-dms.svg" alt="DMS" class="mx-auto card-logo logo-dms">
                    </div>
                  {{/if}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <h5 class="font-weight-bold mb-4">News</h5>
            <div class="card">
              <div class="card-body hino-card-body">
                <div class="row">
                  <div class="col-auto">
                    <div class="latest-news__image rounded" style="background-image: url(https://source.unsplash.com/20qcctvyR1Q/500x500)"></div>
                  </div>
                  <div class="col">
                    <h4 class="text-black font-weight-bold">Luncurkan Fasilitas Servis Kini Hino hadirkan Layanan 3S di Tokopedia</h4>
                    <p>ADMIN | {{moment-format (moment) 'D MMM YYYY'}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    {{!-- modal popup menu --}}
  <div class="modal" id="mega-menu" role="dialog">
    <div class="modal-dialog tryPopup">
      {{!-- Modal content --}}
                    <div class="modal-content">
        <div class="modal-header">
                        {{!-- <!-- <div data-dismiss="modal" class="close-modal" aria-label="Close" class="close"
                          data-target="#myModal">
                          &times;</div> --> --}}
                          <div class="tutup" data-dismiss="modal" aria-label="Close"></div>
        </div>
        <div class="modal-body">
          <div class="col-12">
            <Megamenu::List />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>