<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">{{'input-groups.basic' | translate}}</h5>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">@</span>
          </div>
          <input type="text" class="form-control" placeholder="{{'user.username' | translate}}" aria-label="Username"
            aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="{{'user.username' | translate}}" aria-label="Username"
            aria-describedby="basic-addon2">
          <div class="input-group-append">
            <span class="input-group-text" id="basic-addon2">@example.com</span>
          </div>
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
          </div>
          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">$</span>
          </div>
          <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
          <div class="input-group-append">
            <span class="input-group-text">.00</span>
          </div>
        </div>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">{{'input-groups.with-text-area' | translate}}</span>
          </div>
          <textarea class="form-control" aria-label="With textarea"></textarea>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'input-groups.sizing' | translate}}</h5>
        <div class="input-group input-group-sm mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-sm">{{'input-groups.small' | translate}}</span>
          </div>
          <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">{{'input-groups.default' | translate}}</span>
          </div>
          <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">{{'input-groups.large' | translate}}</span>
          </div>
          <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'input-groups.checkboxes-and-radios' | translate}}</h5>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <input type="checkbox" aria-label="Checkbox for following text input">
            </div>
          </div>
          <input type="text" class="form-control" aria-label="Text input with checkbox">
        </div>
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <input type="radio" aria-label="Radio button for following text input">
            </div>
          </div>
          <input type="text" class="form-control" aria-label="Text input with radio button">
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'input-groups.multiple-inputs' | translate}}</h5>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">{{'input-groups.first-and-last-name' | translate}}</span>
          </div>
          <input type="text" class="form-control">
          <input type="text" class="form-control">
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'input-groups.multiple-addons' | translate}}</h5>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">$</span>
            <span class="input-group-text">0.00</span>
          </div>
          <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        </div>
        <div class="input-group">
          <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
          <div class="input-group-append">
            <span class="input-group-text">$</span>
            <span class="input-group-text">0.00</span>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'input-groups.button-addons' | translate}}</h5>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
          </div>
          <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
        </div>
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
          </div>
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
          </div>
          <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
        </div>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'input-groups.buttons-with-dropdowns' | translate}}</h5>
        <div class="input-group mb-3">
          <div class="input-group-prepend">

            <div class="btn-group" dropdown>
              <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-primary dropdown-toggle"
                aria-controls="dropdown-basic">
                {{'input-groups.dropdown' | translate}} <span class="caret"></span>
              </button>
              <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Action</a></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Another action</a></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Something else here</a></li>
                <li class="divider dropdown-divider"></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Separated link</a>
                </li>
              </ul>
            </div>

          </div>
          <input type="text" class="form-control" aria-label="Text input with dropdown button">
        </div>
        <div class="input-group">
          <input type="text" class="form-control" aria-label="Text input with dropdown button">
          <div class="input-group-append">

            <div class="btn-group" dropdown placement="bottom right">
              <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-primary dropdown-toggle"
                aria-controls="dropdown-basic">
                {{'input-groups.dropdown' | translate}} <span class="caret"></span>
              </button>
              <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="button-basic">
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Action</a></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Another action</a></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Something else here</a></li>
                <li class="divider dropdown-divider"></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Separated link</a>
                </li>
              </ul>
            </div>

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

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'input-groups.segmented-buttons' | translate}}</h5>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <button type="button" class="btn btn-outline-secondary">{{'input-groups.action' | translate}}</button>

            <div class="btn-group" dropdown>
              <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
                aria-controls="dropdown-basic">
                <span class="caret"></span>
              </button>
              <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu " role="menu" aria-labelledby="button-basic">
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Action</a></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Another action</a></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Something else here</a></li>
                <li class="divider dropdown-divider"></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Separated link</a>
                </li>
              </ul>
            </div>

          </div>
          <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
        </div>
        <div class="input-group">
          <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
          <div class="input-group-append">
            <button type="button" class="btn btn-outline-secondary">{{'input-groups.action' | translate}}</button>
            <div class="btn-group" dropdown placement="bottom right">
              <button id="button-basic" dropdownToggle type="button" class="btn btn-outline-secondary dropdown-toggle"
                aria-controls="dropdown-basic">
                <span class="caret"></span>
              </button>
              <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="button-basic">
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Action</a></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Another action</a></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Something else here</a></li>
                <li class="divider dropdown-divider"></li>
                <li role="menuitem"><a class="dropdown-item" href="javascript:;">Separated link</a>
                </li>
              </ul>
            </div>

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

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'input-groups.custom-select' | translate}}</h5>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">{{'input-groups.options' | translate}}</label>
          </div>
          <select class="custom-select" id="inputGroupSelect01">
            <option selected>Choose...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
        </div>
        <div class="input-group mb-3">
          <select class="custom-select" id="inputGroupSelect02">
            <option selected>Choose...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
          <div class="input-group-append">
            <label class="input-group-text" for="inputGroupSelect02">{{'input-groups.options' | translate}}</label>
          </div>
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
          </div>
          <select class="custom-select" id="inputGroupSelect03">
            <option selected>Choose...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
        </div>
        <div class="input-group">
          <select class="custom-select" id="inputGroupSelect04">
            <option selected>Choose...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'input-groups.custom-file-input' | translate}}</h5>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text">{{'input-groups.upload' | translate}}</span>
          </div>
          <div class="custom-file">
            <input type="file" class="custom-file-input" id="inputGroupFile01">
            <label class="custom-file-label" for="inputGroupFile01">{{'input-groups.choose-file' | translate}}</label>
          </div>
        </div>
        <div class="input-group mb-3">
          <div class="custom-file">
            <input type="file" class="custom-file-input" id="inputGroupFile02">
            <label class="custom-file-label" for="inputGroupFile02">{{'input-groups.choose-file' | translate}}</label>
          </div>
          <div class="input-group-append">
            <span class="input-group-text">{{'input-groups.upload' | translate}}</span>
          </div>
        </div>
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
          </div>
          <div class="custom-file">
            <input type="file" class="custom-file-input" id="inputGroupFile03">
            <label class="custom-file-label" for="inputGroupFile03">{{'input-groups.choose-file' | translate}}</label>
          </div>
        </div>
        <div class="input-group">
          <div class="custom-file">
            <input type="file" class="custom-file-input" id="inputGroupFile04">
            <label class="custom-file-label" for="inputGroupFile04">{{'input-groups.choose-file' | translate}}</label>
          </div>
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">{{'input-groups.button' | translate}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
