<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-2">
  <h1 class="h3 mb-0 text-gray-800">{{'DASHBOARD.DASHBOARD' | translate}}</h1>
</div>

<div class="row">
  <div class="col-12 form-group">
    <div class="card-deck">
      <div class="card border-left-success shadow">
        <div class="card-header">
          <h6 class="m-0 font-weight-bold text-primary">{{'DASHBOARD.RECENT_SEND' | translate}}</h6>
        </div>
        <div class="card-body">
          <div class="row bg-white pt-4" ng-show="isLoadData || isLoadData2">
            <div class="col-12 text-center">
              <div class="lds-facebook">
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
          </div>
          <div
            class="row bg-white pt-4"
            ng-show="!isLoadData2 && (!resultProject || items.length === 0)"
          >
            <div class="col-12 text-center text-gray-500">
              <i class="fa fa-3x fa-envelope d-block"></i>
              <span class="d-block">{{'COMMON.PROJECT_MY_FILES_NOT_FOUND' | translate}}</span>
            </div>
          </div>
          <div
            class="row bg-white border-bottom mx-0 py-1"
            ng-show="!isLoadData2 && items.length > 0"
            ng-class="{'selecting-item':item._selected,'opacity-images':item.status !== 1,'select-hover-color': !item._selected}"
            ng-click="openFolder(item,projectId)"
            ng-repeat="item in items"
          >
            <!-- Active file -->
            <div
              class="col-12 col-sm-12 col-md-7 col-lg-7 pointer-cursor d-flex align-items-center"
            >
              <!-- folder -->
              <i class="fas fa-envelope text-gray-500"></i>
              <strong
                class="pointer-cursor d-inline-block text-truncate ml-1"
                title="{{item.name}}"
              >
                {{item.name}}
              </strong>
            </div>
            <div class="text-center col-md-5 col-lg-5 d-none d-sm-none d-md-flex">
              <span class="d-inline-block text-truncate"
                >{{formatDateTime(item.last_modified_date)}}</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="card border-left-danger shadow h-100">
        <div class="card-header">
          <h6 class="m-0 font-weight-bold text-primary">{{'DASHBOARD.STATISTIC' | translate}}</h6>
        </div>
        <div class="card-body">
          <div class="row no-gutters align-items-center form-group">
            <div class="col mr-2">
              <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                {{'DASHBOARD.STORAGE' | translate}}
              </div>
              <div class="row no-gutters align-items-center">
                <div class="col-auto">
                  <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
                    {{usedStoragePercent.toFixed(2)}}%
                  </div>
                </div>
                <div class="col">
                  <div class="progress progress-sm mr-2">
                    <div
                      class="progress-bar bg-primary"
                      role="progressbar"
                      ng-attr-style="width:{{usedStoragePercent}}%;"
                      aria-valuenow="{{usedStoragePercent}}"
                      aria-valuemin="0"
                      aria-valuemax="100"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <i class="fas fa-hdd fa-2x text-gray-500"></i>
            </div>
            <div class="col-12">
              <div class="small">
                <span class="mr-2 d-block d-md-inline text-bold">
                  {{'DASHBOARD.USED_TOOLTIP' | translate:{used: usedStorageConvert, storage:
                  totalStorageConvert} }}
                </span>
              </div>
            </div>
          </div>
          <div class="row no-gutters align-items-center">
            <div class="col mr-2">
              <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                {{'DASHBOARD.TRANSMISSION' | translate}}
              </div>
              <div class="row no-gutters align-items-center">
                <div class="col-auto">
                  <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">
                    {{transmissionPercent.toFixed(2)}}%
                  </div>
                </div>
                <div class="col">
                  <div class="progress progress-sm mr-2">
                    <div
                      class="progress-bar bg-info"
                      role="progressbar"
                      ng-attr-style="width:{{transmissionPercent}}%;"
                      aria-valuenow="{{transmissionPercent}}"
                      aria-valuemin="0"
                      aria-valuemax="100"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-auto">
              <i class="far fa-paper-plane fa-2x text-gray-500"></i>
            </div>
            <div class="col-12">
              <div class="small">
                <span class="mr-2 d-block d-md-inline text-bold">
                  {{'DASHBOARD.TRANSMISSION_TEXT' | translate:{used: transmissionUsed, total:
                  transmissionTotal } }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12 form-group">
    <div class="card-deck">
      <!-- ng-click="openNewTab('https://689cloud.com/sm-support-center.html')" -->
      <div
        class="card shadow bg-gradient-light border-left-info pointer-cursor"
        ng-click="openNewTab('https://689cloud.com/support-securemail/')"
      >
        <div class="card-img-top text-center pt-4 pb-2">
          <i class="far fa-question-circle fa-5x text-info"></i>
        </div>
        <div class="card-body text-center">
          <h5 class="card-title font-weight-bold text-primary">
            {{'DASHBOARD.SUPPORTS.HELP_CENTER' | translate}}
          </h5>
        </div>
      </div>
      <div
        class="card shadow bg-gradient-light border-left-primary pointer-cursor"
        ng-click="openNewTab('https://appsource.microsoft.com/en-us/marketplace/apps?src=Office&search=689cloud')"
      >
        <div class="card-img-top text-center pt-4 pb-2">
          <i class="fab fa-microsoft fa-5x text-primary"></i>
        </div>
        <div class="card-body text-center">
          <h5 class="card-title font-weight-bold text-primary">
            {{'DASHBOARD.SUPPORTS.OUTLOOK_ADD_INS' | translate}}
          </h5>
        </div>
      </div>
      <div
        class="card shadow bg-gradient-light border-left-warning pointer-cursor"
        ng-click="openNewTab('https://chrome.google.com/webstore/detail/689cloud-securemail/gmhicblngdcdiplilpaejmkfkinfipmb')"
      >
        <div class="card-img-top text-center pt-4 pb-2">
          <i class="fab fa-chrome fa-5x text-warning"></i>
        </div>
        <div class="card-body text-center">
          <h5 class="card-title font-weight-bold text-primary">
            {{'DASHBOARD.SUPPORTS.CHROME_EXTENSION' | translate}}
          </h5>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 form-group">
    <div class="card-deck">
      <div class="card shadow bg-gradient-info">
        <div class="card-img-top text-center">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe
              class="embed-responsive-item"
              src="https://www.youtube.com/embed/JXDBQfOmIaE"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen
            ></iframe>
          </div>
        </div>
        <div class="card-body text-center">
          <h5 class="card-title font-weight-bold text-white">
            {{'DASHBOARD.TUTORIAL_VIDEO.ATTACH' | translate}}
          </h5>
        </div>
      </div>
      <div class="card shadow bg-gradient-primary">
        <div class="card-img-top text-center">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe
              ng-if="showVideoJa"
              class="embed-responsive-item"
              src="https://www.youtube.com/embed/XqtZM6HxZCo"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen
            ></iframe>
            <iframe
              ng-if="!showVideoJa"
              class="embed-responsive-item"
              src="https://www.youtube.com/embed/Et902t1lpN4"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen
            ></iframe>
          </div>
        </div>
        <div class="card-body text-center">
          <h5 class="card-title font-weight-bold text-white">
            {{'DASHBOARD.TUTORIAL_VIDEO.OUTLOOK' | translate}}
          </h5>
        </div>
      </div>
      <div class="card shadow bg-gradient-warning">
        <div class="card-img-top text-center">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe
              ng-if="showVideoJa"
              class="embed-responsive-item"
              src="https://www.youtube.com/embed/NF_4F3y_FQ0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen
            ></iframe>
            <iframe
              ng-if="!showVideoJa"
              class="embed-responsive-item"
              src="https://www.youtube.com/embed/G0fRBMlokng"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin"
              allowfullscreen
            ></iframe>
          </div>
        </div>
        <div class="card-body text-center">
          <h5 class="card-title font-weight-bold text-white">
            {{'DASHBOARD.TUTORIAL_VIDEO.GMAIL' | translate}}
          </h5>
        </div>
      </div>
    </div>
  </div>
</div>
