<div class="app-content content">
  <div class="content-wrapper">
    <div class="content-header row mb-1">
      <app-breadcrumb class="col-sm-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
    </div>
    <div class="content-body">
      <!-- Basic Tables start -->
      <div class="row">
        <div class="col-sm-12" *blockUI="'basicTables'; message: 'Loading'">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Basic table</h4>
                  </div>
                 <div class="card-body">
                <p class="card-text">Using the most basic table markup, here’s how <code>.table</code>-based tables
                look in Bootstrap. You can use any example of below table for your table and it can be use with
                any type of ng-bootstrap tables. </p>

              <p><span class="text-bold-600">Example 1:</span> Table with outer spacing</p>
            </div>
              <div class="table-responsive card-body">
               <table class="table">
                <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Firstname</th>
                  <th scope="col">Lastname</th>
                  <th scope="col">Username</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let country of countries; index as i">
                  <th scope="row">{{ i + 1 }}</th>
                  <td>{{ country.firstname }} </td>
                  <td>{{ country.lastname }}</td>
                  <td>{{ country.username }}</td>
                </tr>
                </tbody>
              </table>
              </div>
              <p class ="px-1"><span class="text-bold-600">Example 2:</span> Minimal Table with no outer spacing.</p>
              <div class="table-responsive">
                <table class="table mb-0">
                 <thead>
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">Firstname</th>
                   <th scope="col">Lastname</th>
                   <th scope="col">Username</th>
                 </tr>
                 </thead>
                 <tbody>
                 <tr *ngFor="let country of countries; index as i">
                   <th scope="row">{{ i + 1 }}</th>
                   <td>{{ country.firstname }} </td>
                   <td>{{ country.lastname }}</td>
                   <td>{{ country.username }}</td>
                 </tr>
                 </tbody>
               </table>
               </div>

        </div>
      </div>
      </div>
      <!------Basic table end--->
      <!-----inverse table start-->
      <div class="row">
        <div class="col-sm-12" *blockUI="'inverseTable'; message: 'Loading'">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Inverse table</h4>
                  </div>
                 <div class="card-body">
              <p class="card-text">You can also invert the colors—with light text on dark backgrounds—with
                <code>.table-inverse.</code></p>
                 </div>
                <div class="table-responsive">
                  <table class="table table-inverse mb-0">
                   <thead>
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>
           </div>
      </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Inverse table with info background</h4>
                  </div>
                 <div class="card-body">
              <p class="card-text">You can also invert the colors—with light text on dark backgrounds—with <code>.bg-info </code>,
               <code> .bg-success </code>,  <code>.bg-warning</code> and  <code>.bg-danger</code> classes.

                <br><br>To set the light background color use<code> .bg-[color] </code>class where [color] is the value of your
                selected color from modern color palette. So for teal color background class will be .bg-teal. Refer
                HTML markup line no 1. Background color class is a optional if you don't it will take white background
                default.

                <br><br>To set the selected background color lighten use <code>.bg-lighten-[*]</code> class where [*] is the value
                between '1-5' of your selected lighten color from modern color palette. So for color lighten 4
                background class will be <code>.bg-lighten-4.</code> Refer HTML markup line no 1. Background lighten color class is a
                optional if you don't it will take white background default.</p>
                 </div>
                <div class="table-responsive">
                  <table class="table table-striped bg-info mb-0 white ">
                   <thead>
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>
            </div>
      </div>
      </div>
      <!-- Table head options  start -->
      <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Table head options</h4>
                  </div>
                 <div class="card-body">
              <p>Similar to default and inverse tables, use one of two modifier classes <code
                  class="highlighter-rouge">.thead-default</code>
                or <code class="highlighter-rouge">.thead-inverse</code> to make <code
                  class="highlighter-rouge">&lt;thead&gt;</code>s
                appear light or dark gray.</p>
                 </div>
                <div class="table-responsive">
                  <table class="table">
                   <thead class= "thead-dark">
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>

                <div class="table-responsive">
                  <table class="table">
                   <thead class="thead-light">
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>


            </div>
        </div>
      </div>
      <!-- Table head options end -->

      <!-- Table head options with primary background start -->
      <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Table head options with primary background</h4>
                  </div>
                 <div class="card-body">
              <p>Use background classes <code class="highlighter-rouge">bg-*</code> to make custom
                <code class="highlighter-rouge">thead</code>
                background. You can also use Modern Admin color palette classes for background.</p>
              </div>
                <div class="table">
                  <div class="table-responsive">
                    <table class="table">
                     <thead class="bg-primary white">
                     <tr>
                       <th scope="col">#</th>
                       <th scope="col">Firstname</th>
                       <th scope="col">Lastname</th>
                       <th scope="col">Username</th>
                     </tr>
                     </thead>
                     <tbody>
                     <tr *ngFor="let country of countries; index as i">
                       <th scope="row">{{ i + 1 }}</th>
                       <td>{{ country.firstname }} </td>
                       <td>{{ country.lastname }}</td>
                       <td>{{ country.username }}</td>
                     </tr>
                     </tbody>
                   </table>
                   </div>

                </div>
              <div class="lighten-4">
                <div class="table">
                  <div class="table-responsive">
                    <table class="table">
                     <thead class="bg-teal bg-lighten-4">
                     <tr>
                       <th scope="col">#</th>
                       <th scope="col">Firstname</th>
                       <th scope="col">Lastname</th>
                       <th scope="col">Username</th>
                     </tr>
                     </thead>
                     <tbody>
                     <tr *ngFor="let country of countries; index as i">
                       <th scope="row">{{ i + 1 }}</th>
                       <td>{{ country.firstname }} </td>
                       <td>{{ country.lastname }}</td>
                       <td>{{ country.username }}</td>
                     </tr>
                     </tbody>
                   </table>
                   </div>

                </div>
              </div>

         </div>
      </div>
      </div>
      <!-- Table head options with primary background end -->

      <!-- Striped rows start -->
      <div class="row">
        <div class="col-sm-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Striped rows</h4>
            </div>
            <div class="card-content collapse show">
              <div class="card-body">
                <p class="card-text">Use <code class="highlighter-rouge">.table-striped</code> to add
                  zebra-striping to any table row within the <code class="highlighter-rouge">&lt;tbody&gt;</code>.
                  This styling doesn't work in IE8 and below as <code>:nth-child</code> CSS selector
                  isn't
                  supported.</p>
              </div>
              <div class="table">
                <div class="table-responsive">
                  <table class="table table-striped">
                   <thead>
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Striped rows end -->

      <!-- Striped rows with inverse table start -->
      <div class="row">
        <div class="col-sm-12">
          <div class="card table-bottom-space">
            <div class="card-header">
              <h4 class="card-title">Striped rows with inverse table</h4>
            </div>
            <div class="card-content collapse show">
              <div class="card-body">
                <p class="card-text">Use <code>.table-inverse</code> with <code>.table-striped</code> to
                  add
                  zebra-striping to any inverse table row within the <code>&lt;tbody&gt;</code>. This
                  styling
                  doesn't work in IE8 and below as <code>:nth-child</code> CSS selector isn't
                  supported.</p>
              </div>
              <div class="table">
                <div class="table-responsive">
                  <table class="table table-inverse table-striped mb-0">
                   <thead>
                   <tr>
                     <th scope="col">#</th>
                     <th scope="col">Firstname</th>
                     <th scope="col">Lastname</th>
                     <th scope="col">Username</th>
                   </tr>
                   </thead>
                   <tbody>
                   <tr *ngFor="let country of countries; index as i">
                     <th scope="row">{{ i + 1 }}</th>
                     <td>{{ country.firstname }} </td>
                     <td>{{ country.lastname }}</td>
                     <td>{{ country.username }}</td>
                   </tr>
                   </tbody>
                 </table>
                 </div>

              </div>
            </div>
          </div>
        </div>
      </div>

   <!-- Bordered table start -->
   <div class="row">
    <div class="col-sm-12">
      <div class="card table-bottom-space">
        <div class="card-header">
          <h4 class="card-title">Bordered table</h4>
        </div>
        <div class="card-content collapse show">
          <div class="card-body">
            <p class="card-text">Add<code>.table-bordered</code>  for borders on all sides of the table and cells.
            </p>
          </div>
          <div class="table">
            <div class="table-responsive">
              <table class="table table-bordered mb-0">
               <thead>
               <tr>
                 <th scope="col">#</th>
                 <th scope="col">Firstname</th>
                 <th scope="col">Lastname</th>
                 <th scope="col">Username</th>
               </tr>
               </thead>
               <tbody>
               <tr *ngFor="let country of countries; index as i">
                 <th scope="row">{{ i + 1 }}</th>
                 <td>{{ country.firstname }} </td>
                 <td>{{ country.lastname }}</td>
                 <td>{{ country.username }}</td>
               </tr>
               </tbody>
             </table>
             </div>

          </div>
        </div>
      </div>
    </div>
  </div>
    <!-- Bordered striped table start -->
    <div class="row">
      <div class="col-sm-12">
        <div class="card table-bottom-space">
          <div class="card-header">
            <h4 class="card-title">Bordered striped</h4>
          </div>
          <div class="card-content collapse show">
            <div class="card-body">
              <p class="card-text">Use <code>.table-striped</code> with <code>.table-bordered</code> to add
                zebra-striping to any table row within the <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
            </div>
            <div class="table">
              <div class="table-responsive">
                <table class="table table-bordered table-striped">
                 <thead>
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">Firstname</th>
                   <th scope="col">Lastname</th>
                   <th scope="col">Username</th>
                 </tr>
                 </thead>
                 <tbody>
                 <tr *ngFor="let country of countries; index as i">
                   <th scope="row">{{ i + 1 }}</th>
                   <td>{{ country.firstname }} </td>
                   <td>{{ country.lastname }}</td>
                   <td>{{ country.username }}</td>
                 </tr>
                 </tbody>
               </table>
               </div>

            </div>
          </div>
        </div>
      </div>
    </div>
     <!-- Bordered Table Inverse table start -->
     <div class="row">
      <div class="col-sm-12">
        <div class="card table-bottom-space">
          <div class="card-header">
            <h4 class="card-title">Bordered Table Inverse</h4>
          </div>
          <div class="card-content collapse show">
            <div class="card-body">
              <p class="card-text">Use <code>.table-inverse</code> with <code>.table-bordered</code> to add
                zebra-striping to any table row within the <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
            </div>
            <div class="table">
              <div class="table-responsive">
                <table class="table table-bordered table-inverse mb-0">
                 <thead>
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">Firstname</th>
                   <th scope="col">Lastname</th>
                   <th scope="col">Username</th>
                 </tr>
                 </thead>
                 <tbody>
                 <tr *ngFor="let country of countries; index as i">
                   <th scope="row">{{ i + 1 }}</th>
                   <td>{{ country.firstname }} </td>
                   <td>{{ country.lastname }}</td>
                   <td>{{ country.username }}</td>
                 </tr>
                 </tbody>
               </table>
               </div>

            </div>
          </div>
        </div>
      </div>
    </div>
     <!-- Hoverable rows table start -->
     <div class="row">
      <div class="col-sm-12">
        <div class="card table-bottom-space">
          <div class="card-header">
            <h4 class="card-title">Hoverable rows</h4>
          </div>
          <div class="card-content collapse show">
            <div class="card-body">
              <p>Add <code class="highlighter-rouge">.table-hover</code> to enable a hover state on table rows
                within a <code class="highlighter-rouge">&lt;tbody&gt;</code>.</p>
            </div>
            <div class="table">
              <div class="table-responsive">
                <table class="table table-hover mb-0">
                 <thead>
                 <tr>
                   <th scope="col">#</th>
                   <th scope="col">Firstname</th>
                   <th scope="col">Lastname</th>
                   <th scope="col">Username</th>
                 </tr>
                 </thead>
                 <tbody>
                 <tr *ngFor="let country of countries; index as i">
                   <th scope="row">{{ i + 1 }}</th>
                   <td>{{ country.firstname }} </td>
                   <td>{{ country.lastname }}</td>
                   <td>{{ country.username }}</td>
                 </tr>
                 </tbody>
               </table>
               </div>

            </div>
          </div>
        </div>
      </div>
    </div>
   <!-- Contextual classes start -->
