<mat-card class="cardWithShadow theme-card">
  <mat-card-header>
    <mat-card-title class="m-b-0">Lists</mat-card-title>
  </mat-card-header>
  <mat-card-content class="b-t-1">
    <div class="row">
      <div class="col-lg-6">
        <!-- --------------------------------------------------- -->
        <!-- basic -->
        <!-- --------------------------------------------------- -->
        <mat-card class="b-1 shadow-none">
          <mat-card-header>
            <mat-card-title>Basic</mat-card-title>
          </mat-card-header>
          <mat-card-content class="b-t-1">
            <mat-list role="list">
              <mat-list-item role="listitem">Item 1</mat-list-item>
              <mat-list-item role="listitem">Item 2</mat-list-item>
              <mat-list-item role="listitem">Item 3</mat-list-item>
            </mat-list>
          </mat-card-content>
        </mat-card>
      </div>

      <div class="col-lg-6">
        <!-- --------------------------------------------------- -->
        <!-- two line -->
        <!-- --------------------------------------------------- -->
        <mat-card class="b-1 shadow-none">
          <mat-card-header>
            <mat-card-title>Two Line</mat-card-title>
          </mat-card-header>
          <mat-card-content class="b-t-1">
            <mat-list>
              <mat-list-item>
                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
                <span matListItemLine class="mat-body-1">Second line</span>
              </mat-list-item>
              <mat-list-item>
                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
                <span matListItemLine class="mat-body-1">Second line</span>
              </mat-list-item>
            </mat-list>
          </mat-card-content>
        </mat-card>
      </div>

      <div class="col-lg-6">
        <!-- --------------------------------------------------- -->
        <!-- two line -->
        <!-- --------------------------------------------------- -->
        <mat-card class="b-1 shadow-none">
          <mat-card-header>
            <mat-card-title>Three Line</mat-card-title>
          </mat-card-header>
          <mat-card-content class="b-t-1">
            <mat-list>
              <mat-list-item>
                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
                <span matListItemLine class="mat-body-1">Second line</span>
                <span matListItemLine class="mat-body-1">Third line</span>
              </mat-list-item>
              <mat-list-item>
                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
                <span matListItemLine class="mat-body-1"
                  >Second line. This line will truncate.</span
                >
                <span class="mat-body-1">Third line</span>
              </mat-list-item>
            </mat-list>
          </mat-card-content>
        </mat-card>
      </div>

      <div class="col-lg-6">
        <!-- --------------------------------------------------- -->
        <!-- two line -->
        <!-- --------------------------------------------------- -->
        <mat-card class="b-1 shadow-none">
          <mat-card-header>
            <mat-card-title>Three Line with Text wrapping</mat-card-title>
          </mat-card-header>
          <mat-card-content class="b-t-1">
            <mat-list style="max-width: 500px">
              <mat-list-item lines="3">
                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
                <span class="mat-body-1"
                  >Secondary line that will wrap because the list lines is
                  explicitly set to 3 lines. Text inside of a `matListItemTitle`
                  or `matListItemLine` will never wrap.
                </span>
              </mat-list-item>
              <mat-list-item lines="3" class="mat-body-1">
                <span matListItemTitle class="f-s-16 f-w-600">Title</span>
                <span class="mat-body-1"
                  >Secondary line that will wrap because the list lines is
                  explicitly set to 3 lines. Text inside of a `matListItemTitle`
                  or `matListItemLine` will never wrap.
                </span>
              </mat-list-item>
            </mat-list>
          </mat-card-content>
        </mat-card>
      </div>

      <div class="col-lg-6">
        <!-- --------------------------------------------------- -->
        <!-- List with Selection -->
        <!-- --------------------------------------------------- -->
        <mat-card class="b-1 shadow-none">
          <mat-card-header>
            <mat-card-title>List with Selection</mat-card-title>
          </mat-card-header>
          <mat-card-content class="b-t-1">
            <mat-selection-list #shoes>
              @for(shoe of typesOfShoes; track shoe) {
              <mat-list-option>
                {{ shoe }}
              </mat-list-option>
              }
            </mat-selection-list>

            <p class="mat-subtitle-2 f-w-600 p-16 bg-light-primary rounded">
              Options selected: {{ shoes.selectedOptions.selected.length }}
            </p>
          </mat-card-content>
        </mat-card>
      </div>

      <div class="col-lg-6">
        <!-- --------------------------------------------------- -->
        <!-- List with single Selection -->
        <!-- --------------------------------------------------- -->
        <mat-card class="b-1 shadow-none">
          <mat-card-header>
            <mat-card-title>List with single Selection</mat-card-title>
          </mat-card-header>
          <mat-card-content class="b-t-1">
            <mat-selection-list #shoes2 [multiple]="false">
              @for(shoe of typesOfShoes; track shoe) {
              <mat-list-option [value]="shoe">
                {{ shoe }}
              </mat-list-option>
              }
            </mat-selection-list>

            <p class="mat-subtitle-2 f-w-600 p-16 bg-light-primary rounded">
              Option selected:
              {{
                shoes2.selectedOptions.hasValue()
                  ? shoes2.selectedOptions.selected[0].value
                  : "None"
              }}
            </p>
          </mat-card-content>
        </mat-card>
      </div>

      <div class="col-12">
        <!-- --------------------------------------------------- -->
        <!-- List with sections -->
        <!-- --------------------------------------------------- -->
        <mat-card class="b-1 shadow-none">
          <mat-card-header>
            <mat-card-title>List with sections</mat-card-title>
          </mat-card-header>
          <mat-card-content class="b-t-1">
            <mat-list>
              <div mat-subheader class="mat-body-2 m-b-16 f-w-600">Folders</div>
              @for(folder of folders; track folder.name) {
              <mat-list-item>
                <mat-icon matListItemIcon>folder</mat-icon>
                <div matListItemTitle class="mat-body-2 f-w-600">
                  {{ folder.name }}
                </div>
                <div matListItemLine class="f-s-14 mat-body-1">
                  {{ folder.updated | date }}
                </div>
              </mat-list-item>
              }

              <mat-divider></mat-divider>
              <div mat-subheader class="mat-body-2 m-y-16 f-w-600">Notes</div>
              @for(note of notes; track note.name) {
              <mat-list-item>
                <mat-icon matListItemIcon>note</mat-icon>
                <div matListItemTitle class="mat-body-2 f-w-600">
                  {{ note.name }}
                </div>
                <div matListItemLine class="f-s-14 mat-body-1">
                  {{ note.updated | date }}
                </div>
              </mat-list-item>
              }
            </mat-list>
          </mat-card-content>
        </mat-card>
      </div>
    </div>
  </mat-card-content>
</mat-card>
