<div class="row">
  <div class="col-12">
    <app-heading></app-heading>
    <app-breadcrumb></app-breadcrumb>
    <div class="separator mb-5"></div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.colors' | translate}}</h5>
        <button type="button" class="btn btn-primary mb-1">{{'button.primary' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-secondary mb-1">{{'button.secondary' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-success mb-1">{{'button.success' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-danger mb-1">{{'button.danger' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-warning mb-1">{{'button.warning' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-info mb-1">{{'button.info' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-light mb-1">{{'button.light' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-dark mb-1">{{'button.dark' | translate}}</button>{{" "}}
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.rounded' | translate}}</h5>
        <button type="button" class="btn btn-primary mb-1">{{'button.primary' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-secondary mb-1">Secondary</button>{{" "}}
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.outline' | translate}}</h5>
        <button type="button" class="btn btn-outline-primary mb-1">{{'button.primary' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-outline-secondary mb-1">{{'button.secondary' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-outline-success mb-1">{{'button.success' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-outline-danger mb-1">{{'button.danger' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-outline-warning mb-1">{{'button.warning' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-outline-info mb-1">{{'button.info' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-outline-light mb-1">{{'button.light' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-outline-dark mb-1">{{'button.dark' | translate}}</button>{{" "}}
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.states' | translate}}</h5>
        <div class="mb-3">
          <p class="mb-1">{{'button.states-text' | translate}}</p>
          <app-state-button btnClass="btn btn-primary" [currentState]="stateButton1CurrentState" [message]="stateButton1Message"
            [showMessage]="stateButton1ShowMessage" (click)="onStateButton1Click()" [isDisabled]="stateButton1Disabled">Click Here
          </app-state-button>
        </div>

        <div>
          <p class="mb-1">{{'button.states-text-alternate' | translate}}</p>
          <app-state-button btnClass="btn btn-primary" [currentState]="stateButton2CurrentState" [message]="stateButton2Message"
            [showMessage]="stateButton2ShowMessage" (click)="onStateButton2Click()" [isDisabled]="stateButton2Disabled">Click Here
          </app-state-button>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.sizes' | translate}}</h5>
        <div class="mb-4">
          <h6 class="mb-2">{{'button.large-button' | translate}}</h6>
          <button type="button"
            class="btn btn-primary btn-lg mb-1">{{'button.large-button' | translate}}</button>{{" "}}
          <button type="button"
            class="btn btn-secondary btn-lg mb-1">{{'button.large-button' | translate}}</button>{{" "}}
        </div>
        <div class="mb-4">
          <h6 class="mb-2">{{'button.small-button' | translate}}</h6>
          <button type="button"
            class="btn btn-primary btn-sm mb-1">{{'button.small-button' | translate}}</button>{{" "}}
          <button type="button"
            class="btn btn-secondary btn-sm mb-1">{{'button.small-button' | translate}}</button>{{" "}}
        </div>
        <div class="mb-4">
          <h6 class="mb-2">{{'button.extra-small-button' | translate}}</h6>
          <button type="button"
            class="btn btn-primary btn-xs mb-1">{{'button.extra-small-button' | translate}}</button>{{" "}}
          <button type="button"
            class="btn btn-secondary btn-xs mb-1">{{'button.extra-small-button' | translate}}</button>{{" "}}
        </div>
        <div>
          <h6 class="mb-2">{{'button.block-button' | translate}}</h6>
          <button type="button"
            class="btn btn-primary btn-block mb-1">{{'button.block-button' | translate}}</button>{{" "}}
          <button type="button" class="btn btn-secondary btn-block mb-1">{{'button.block-button' | translate}}</button>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.states' | translate}}</h5>
        <div class="mb-4">
          <h6 class="mb-1">{{'button.active' | translate}}</h6>
          <a href="javascript:;" class="btn btn-primary active mb-1" role="button"
            aria-pressed="true">{{'button.primary-link' | translate}}</a>{{" "}}
          <a href="javascript:;" class="btn btn-secondary active mb-1" role="button"
            aria-pressed="true">{{'button.link' | translate}}</a>{{" "}}
        </div>
        <div>
          <h6 class="mb-1">{{'button.disabled' | translate}}</h6>
          <button type="button" class="btn btn-primary mb-1"
            disabled>{{'button.primary-button' | translate}}</button>{{" "}}
          <button type="button" class="btn btn-secondary mb-1"
            disabled>{{'button.block-button' | translate}}</button>{{" "}}
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.button-groups' | translate}}</h5>
        <div class="mb-4">
          <h6 class="mb-1">{{'button.basic' | translate}}</h6>
          <div class="btn-group" role="group" attr.aria-label="{{ 'button.basic' | translate}}">
            <button type="button" class="btn  btn-primary">{{ 'button.left' | translate}}</button>
            <button type="button" class="btn  btn-primary">{{ 'button.middle' | translate}}</button>
            <button type="button" class="btn  btn-primary">{{ 'button.right' | translate}}</button>
          </div>
        </div>

        <div class="mb-4">
          <h6 class="mb-1">{{'button.toolbar' | translate}}</h6>
          <div class="btn-toolbar" role="toolbar" attr.aria-label="{{'button.toolbar' | translate}}">
            <div class="btn-group mr-2 mb-1" role="group" aria-label="First group">
              <button type="button" class="btn  btn-primary">1</button>
              <button type="button" class="btn  btn-primary">2</button>
              <button type="button" class="btn btn-primary">3</button>
              <button type="button" class="btn  btn-primary">4</button>
            </div>
            <div class="btn-group mr-2 mb-1" role="group" aria-label="Second group">
              <button type="button" class="btn  btn-primary">5</button>
              <button type="button" class="btn btn-primary">6</button>
              <button type="button" class="btn  btn-primary">7</button>
            </div>
            <div class="btn-group  mb-1" role="group" aria-label="Third group">
              <button type="button" class="btn btn-primary">8</button>
            </div>
          </div>
        </div>

        <div>
          <h6 class="mb-1">{{'button.sizes' | translate}}</h6>
          <div class="btn-group btn-group-lg  mr-2  mb-1" role="group">
            <button type="button" class="btn  btn-primary">1</button>
            <button type="button" class="btn  btn-primary">2</button>
          </div>
          <div class="btn-group  mr-2  mb-1" role="group">
            <button type="button" class="btn  btn-primary">1</button>
            <button type="button" class="btn  btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
          </div>
          <div class="btn-group btn-group-sm  mr-2  mb-1" role="group">
            <button type="button" class="btn  btn-primary">1</button>
            <button type="button" class="btn  btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.vertical-variation' | translate}}</h5>
        <div class="btn-group-vertical" role="group" attr.aria-label="{{'button.vertical-variation' | translate}}">
          <button type="button" class="btn btn-secondary default">{{'button.button' | translate}}</button>
          <button type="button" class="btn btn-secondary">{{'button.button' | translate}}</button>
          <button type="button" class="btn btn-secondary">{{'button.button' | translate}}</button>
          <button type="button" class="btn btn-secondary">{{'button.button' | translate}}</button>
          <button type="button" class="btn btn-secondary">{{'button.button' | translate}}</button>
          <button type="button" class="btn btn-secondary default">{{'button.button' | translate}}</button>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.checkbox-radio-button' | translate}}</h5>
        <div class="mb-4">
          <h6 class="mb-2">{{'button.checkbox' | translate}}</h6>
          <div class="btn-group">
            <label class="btn btn-primary" [(ngModel)]="checkModel.left" btnCheckbox tabindex="0"
              role="button">{{ 'button.left' | translate}}</label>
            <label class="btn btn-primary" [(ngModel)]="checkModel.middle" btnCheckbox tabindex="0"
              role="button">{{ 'button.middle' | translate}}</label>
            <label class="btn btn-primary" [(ngModel)]="checkModel.right" btnCheckbox tabindex="0"
              role="button">{{ 'button.right' | translate}}</label>
          </div>
        </div>
        <div class="mb-4">
          <h6 class="mb-2">{{'button.checkbox-single' | translate}}</h6>
          <button type="button" class="btn btn-primary" [(ngModel)]="singleModel" btnCheckbox btnCheckboxTrue="1"
            btnCheckboxFalse="0">
            {{'button.single' | translate}}
          </button>
        </div>
        <div class="mb-4">
          <h6 class="mb-2">{{'button.radio-button' | translate}}</h6>
          <div class="btn-group">
            <label class="btn btn-outline-primary" [(ngModel)]="radioModel" btnRadio="Left" tabindex="0"
              role="button">{{ 'button.left' | translate}}</label>
            <label class="btn btn-outline-primary" [(ngModel)]="radioModel" btnRadio="Middle" tabindex="0"
              role="button">{{ 'button.middle' | translate}}</label>
            <label class="btn btn-outline-primary" [(ngModel)]="radioModel" btnRadio="Right" tabindex="0"
              role="button">{{ 'button.right' | translate}}</label>
          </div>
        </div>
        <div class="mb-4">
          <h6 class="mb-2">{{'button.radio-button-uncheckable' | translate}}</h6>
          <div class="btn-group" btnRadioGroup [(ngModel)]="uncheckableRadioModel">
            <label class="btn btn-outline-primary" btnRadio="Left" uncheckable tabindex="0"
              role="button">{{ 'button.left' | translate}}</label>
            <label class="btn btn-outline-primary" btnRadio="Middle" uncheckable tabindex="0"
              role="button">{{ 'button.middle' | translate}}</label>
            <label class="btn btn-outline-primary" btnRadio="Right" uncheckable tabindex="0"
              role="button">{{ 'button.right' | translate}}</label>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'button.default' | translate}}</h5>
        <button type="button" class="btn btn-primary default mb-1">{{'button.primary' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-secondary default mb-1">{{'button.secondary' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-success default mb-1">{{'button.success' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-danger default mb-1">{{'button.danger' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-warning default mb-1">{{'button.warning' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-info default mb-1">{{'button.info' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-light default mb-1">{{'button.light' | translate}}</button>{{" "}}
        <button type="button" class="btn btn-dark default mb-1">{{'button.dark' | translate}}</button>{{" "}}
      </div>
    </div>
  </div>
</div>
