<index-title [titles]="section.name"></index-title>
<div class="list">

  <ng-container *ngFor="let assemble of this.assembles; index as index">
    <section class='assemble' *ngIf="index < section.rows * section.cols">
      <header class="category cursor" [routerLink]="'/list/category/' + assemble.category">
        <m-category-name [category]="assemble.category"></m-category-name>
      </header>
      <main>
        <ng-container *ngFor="let soft of softs.get(assemble.category+ '-'+index) | async; first as first;index as itemIndex">
          <section class="item cursor" [class.first]="first"
            [routerLink]="['app', soft.id]">

            <header>
              <img [src]="first ? soft.info.cover : soft.info.icon" [dstoreCover]="first ? 'cover' : 'icon'"
                [class.cover]="first" [class.icon]="!first" />
            </header>
            <main [class.hover]="controlRef?.show">
              <div class="info">
                <span class="name">{{ soft.info.name }}</span>
                <div class="slogan">{{ soft.info.slogan }}</div>
              </div>
              <div class="control">
                <dstore-control #controlRef [soft]="soft"></dstore-control>
              </div>
            </main>
          </section>
        </ng-container>
      </main>

    </section>
  </ng-container>

  <ng-container *ngIf="assembleSection.y!==assembles.length">
    <section class="item empty" *ngFor="let empty of 7 | range"></section>
  </ng-container>
</div>
