<div class="row">
  <div class="col-12">
    <div>
      <h1>Chocolate Cake</h1>
      <div class="top-right-button-container">
        <div dropdown>
          <button dropdownToggle type="button" class="btn btn-outline-primary btn-lg flex-grow-1 dropdown-toggle">
            {{ 'pages.actions' | translate }} <span class="caret"></span>
          </button>
          <ul *dropdownMenu class="dropdown-menu dropdown-menu-right">
            <li role="menuitem"><a class="dropdown-item" href="javascript:;">Action</a></li>
            <li role="menuitem"><a class="dropdown-item" href="javascript:;">Another action</a></li>
          </ul>
        </div>
      </div>
      <app-breadcrumb></app-breadcrumb>
    </div>
    <tabset class="separator-tabs ml-0">
      <tab [heading]="('pages.details' | translate)" class="tab-content">
        <div class="row">
          <div class="col-12 col-lg-4 mb-4">
            <app-product-detail-info-alt></app-product-detail-info-alt>
            <app-radial-process-card [title]="('pages.order-status' | translate)" [percent]="85" [isSortable]="false"
              [class]="'mb-4'"></app-radial-process-card>
            <app-radial-process-card [title]="('pages.bake-progress' | translate)" [percent]="40" [isSortable]="false"
              [class]="'mb-4'"></app-radial-process-card>
          </div>
          <div class="col-12 col-lg-8">
            <div class="row">
              <div class="col-6 mb-4">
                <div class="card dashboard-small-chart-analytics">
                  <div class="card-body">
                    <app-small-line-chart [data]="smallChartData1" [options]="chartDataConfig.smallLineChartOptions"
                      class="chart">
                    </app-small-line-chart>
                  </div>
                </div>
              </div>
              <div class="col-6 mb-4">
                <div class="card dashboard-small-chart-analytics">
                  <div class="card-body">
                    <app-small-line-chart [data]="smallChartData2" [options]="chartDataConfig.smallLineChartOptions"
                      class="chart">
                    </app-small-line-chart>
                  </div>
                </div>
              </div>
              <div class="col-6 mb-4">
                <div class="card dashboard-small-chart-analytics">
                  <div class="card-body">
                    <app-small-line-chart [data]="smallChartData3" [options]="chartDataConfig.smallLineChartOptions"
                      class="chart">
                    </app-small-line-chart>
                  </div>
                </div>
              </div>
              <div class="col-6 mb-4">
                <div class="card dashboard-small-chart-analytics">
                  <div class="card-body">
                    <app-small-line-chart [data]="smallChartData4" [options]="chartDataConfig.smallLineChartOptions"
                      class="chart">
                    </app-small-line-chart>
                  </div>
                </div>
              </div>
            </div>
            <div class="card mb-4">
              <div class="card-body">
                <h5 class="card-title">{{ 'pages.popularity' | translate }}</h5>
                <div class="chart-container">
                  <app-area-chart [data]="areaChartData" [options]="chartDataConfig.areaChartOptions"></app-area-chart>
                </div>
              </div>
            </div>
            <app-product-detail-comments></app-product-detail-comments>
          </div>
        </div>
      </tab>
      <tab [heading]="('pages.orders' | translate)" class="tab-content">
        <div class="row">
          <div class="col-12">
            <app-product-detail-orders></app-product-detail-orders>
          </div>
        </div>
      </tab>
    </tabset>
  </div>
</div>
