<div class="app-content content">
  <div class="content-wrapper">
    <div class="content-header row mb-1">
      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
    </div>
    <div class="content-body">
      <!-- Default styling start -->
      <div class="row" id="default">
        <div class="col-12" *blockUI="'defaultStyling'; message: 'Loading'">
            <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Default styling</h4>
                </div>
                <div class="card-content collapse show">
              <div class="card-body card-dashboard ">
                <p class="card-text">Example of a table with bootstrap default styling. By default any
                  table with
                  <code>.table</code> class has <em>transparent</em> background color.</p>
              </div>


              <div class="table-responsive">
                <table class="table mb-0">
                  <thead class="bouble-border">
                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
</div>
            </div>
            
        </div>
      </div>
      <!-- Default styling end -->
      <!-- Table header styling start -->
      <div class="row" id="header-styling">
        <div class="col-12" *blockUI="'tableHeaderStyling'; message: 'Loading'">
            <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Table header styling</h4>
                </div>
                <div class="card-content collapse show">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of a custom table <em>header</em> styling. Table header
                  supports  default contextual and custom background colors change to use bootstrap class.
                  Add <code>.bg-*</code> class to the header row. All border and text colors
                  will be
                  automatically adjusted.</p>
              </div>
              <div class="table-responsive">
                <table class="table mb-0">
                  <thead class="bg-success white">
                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                     <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="card-body card-dashboard">
                <p>Apart form bootstrap color options you can also use Modern Admin color palette
                  options, To set
                  the selected bg color lighten use <code>.bg-*</code> where <code>*</code> is the
                  value of your
                  selected color from palette, and with that use <code>.bg-lighten-*</code> or
                  <code>.bg-darken-*</code>
                  class where <code>*</code> is the value between '1-5' of your selected
                  lighten/darken color
                  from modern color palette. So for color lighten 4 bg class will be
                  <code>.bg-lighten-4</code>.</p>
              </div>


              <div class="table-responsive">
                <table class="table mb-0">
                  <thead class="bg-yellow bg-lighten-4">
                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
                </div>
            </div>
        </div>
      </div>

      <!-- Table header styling start -->
      <div class="row" id="header-styling">
        <div class="col-12" *blockUI="'tableHeaderStyling'; message: 'Loading'">
            <div class="card">
                <div class="card-header">
                  <h4 class="card-title">Table footer styling</h4>
                </div>
                <div class="card-content collapse show">      
               <div class="card-body card-dashboard">
                <p class="card-text">Example of a custom table <em>footer</em> styling. Table footer
                  supports
                  default contextual and custom background colors to use bootstrap class .
                   Add <code>.bg-*</code> class to the header row. All border and text colors
                  will be automatically adjusted.</p>
              </div>
              <div class="table-responsive">
                <table class="table mb-0">

                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                  <tfoot class="bg-success white">
                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <div class="card-body card-dashboard">
                <p>Apart form bootstrap color options you can also use Modern Admin color palette
                  options, To set
                  the selected bg color lighten use <code>.bg-*</code> where <code>*</code> is the
                  value of your
                  selected color from palette, and with that use <code>.bg-lighten-*</code> or
                  <code>.bg-darken-*</code>
                  class where <code>*</code> is the value between '1-5' of your selected
                  lighten/darken color
                  from modern color palette. So for color lighten 4 bg class will be
                  <code>.bg-lighten-4</code>.</p>
              </div>


              <div class="table-responsive">
                <table class="table mb-0">

                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                  <tfoot class="bg-yellow bg-lighten-4">
                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
                </div>
            </div>
        </div>
      </div>
      <div class="row" id="table-formatting">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Custom table formatting</h4>
            </div>
            <div class="card-content collapse show">
              <div class="card-body card-dashboard">
                <p class="card-text">Example of a table with custom <em>formatting</em> color.</p>
              </div>
              <div class="table-responsive">
                <table class="table table-inverse  bg-primary">
                  <thead class="">
                    <tr>
                       <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{country.password}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p class="text-bold-600 px-1">Header and footer formatting</p>
              <div class="table-responsive">
                <table class="table table-inverse  bg-primary">
                  <thead class="">
                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                  <tfoot class="table table-inverse  bg-primary">
                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </tfoot>
                </table>
              </div>
              <div class="card-body card-dashboard">
                <p>Modern Admin color palette options can be use also for the custom table formatting,
                  To set the
                  selected bg color lighten
                  use <code>.bg-*</code> where <code>*</code> is the value
                  of your
                  selected color from palette, and with that use <code>.bg-lighten-*</code> or
                  <code>.bg-darken-*</code>
                  class where <code>*</code> is the value between '1-5' of your selected
                  lighten/darken color
                  from modern color palette. So for color lighten 4 bg class will be
                  <code>.bg-lighten-4</code>.</p>
              </div>
            </div>
            <div class="card-content collapse show">
              <div class="table-responsive">
                <table class="table table-inverse bg-purple bg-lighten-2">
                  <thead>

                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
             <p class="text-bold-600 px-1">Header and footer formatting</p>
              <div class="table-responsive">
                <table class="table table-inverse bg-purple bg-lighten-2">

                  <thead>
                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                  <tfoot class="table table-inverse bg-purple bg-lighten-2">
                    <tr>
                      <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </tfoot>

                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="table-formatting">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Table formatting options</h4>
            </div>
            <div class="card-content collapse show">
              <div class="card-body card-dashboard">
                <p class="card-text">Table with custom formatting color supports all default table layouts and options.
                  In this example our table displays all possible borders, striped rows and changes background color on
                  row hover.
                </p>
              </div>
              <div class="table-responsive">
                <table class="table bg-warning table-bordered table-striped table-hover white">
                  <thead>
                    <tr>
                     <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="card-body card-dashboard">
                <p>Modern Admin color palette options can be use also for the custom table formatting,
                  To set the
                  selected bg color lighten
                  use <code>.bg-*</code> where <code>*</code> is the value
                  of your
                  selected color from palette, and with that use <code>.bg-lighten-*</code> or
                  <code>.bg-darken-*</code>
                  class where <code>*</code> is the value between '1-5' of your selected
                  lighten/darken color
                  from modern color palette. So for color lighten 4 bg class will be
                  <code>.bg-lighten-4</code>.</p>
              </div>
              <div class="table-responsive">
                <table class="table bg-red bg-lighten-1 table-inverse table-bordered table-striped table-hover">
                  <thead>
                    <tr>
                     <th scope="col">Firstname</th>
                      <th scope="col">Lastname</th>
                      <th scope="col">Email</th>
                      <th scope="col">Password</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let country of countries; index as i">
                      <td>{{ country.firstname }} </td>
                      <td>{{ country.lastname }}</td>
                      <td>{{ country.email }}</td>
                      <td>{{ country.password }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ////////////////////////////////////////////////////////////////////////////-->