@extends("flowdash::layouts.{$layout}", [
  'title' => 'Buttons',
  'breadcrumb' => [[
    'title' => 'UI Components'
  ], [
    'title' => 'Buttons'
  ]],
  'new_button_label' => false
])

@section('content')
<div class="{{ $containerClass ?? 'container' }} page__container">
  <div class="row">
    <div class="col-lg">
      <div class="card">
        <div class="card-header card-header-large bg-white">
          <h4 class="card-header__title">Default Buttons</h4>
        </div>
        <div class="card-body">
          <p>Use  button classes on an <code>{!! htmlentities("<a>") !!}</code>, <code>{!! htmlentities("<button>") !!}</code>, or <code>{!! htmlentities("<input>") !!}</code> element.</p>

          <div class="button-list">
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
            <button type="button" class="btn btn-link">Link</button>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header card-header-large bg-white">
          <h4 class="card-header__title">Outlined Buttons</h4>
        </div>
        <div class="card-body">
          <p>Use the <code>.btn-outline-*</code> classes to create bordered buttons.</p>
          <div class="button-list">
            <button type="button" class="btn btn-outline-primary">Primary</button>
            <button type="button" class="btn btn-outline-secondary">Secondary</button>
            <button type="button" class="btn btn-outline-success">Success</button>
            <button type="button" class="btn btn-outline-danger">Danger</button>
            <button type="button" class="btn btn-outline-warning">Warning</button>
            <button type="button" class="btn btn-outline-info">Info</button>
            <button type="button" class="btn btn-outline-dark">Dark</button>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header card-header-large bg-white">
          <h4 class="card-header__title">Rounded Buttons</h4>
        </div>
        <div class="card-body">
          <p>Add <code>rounded</code> to buttons to get large rounded corners.</p>
          <div class="button-list">
            <button type="button" class="btn btn-primary btn-rounded">Primary</button>
            <button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
            <button type="button" class="btn btn-success btn-rounded">Success</button>
            <button type="button" class="btn btn-danger btn-rounded">Danger</button>
            <button type="button" class="btn btn-warning btn-rounded">Warning</button>
            <button type="button" class="btn btn-info btn-rounded">Info</button>
            <button type="button" class="btn btn-light btn-rounded">Light</button>
            <button type="button" class="btn btn-dark btn-rounded">Dark</button>
            <button type="button" class="btn btn-link btn-rounded">Link</button>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header card-header-large bg-white">
          <h4 class="card-header__title">Rounded Outlined Buttons</h4>
        </div>
        <div class="card-body">
          <p>Use the <code>.btn-outline-*</code> and <code>.btn-rounded</code> classes together to quickly create bordered buttons with large rounded corners.</p>
          <div class="button-list">
            <button type="button" class="btn btn-outline-primary btn-rounded">Primary</button>
            <button type="button" class="btn btn-outline-secondary btn-rounded">Secondary</button>
            <button type="button" class="btn btn-outline-success btn-rounded">Success</button>
            <button type="button" class="btn btn-outline-danger btn-rounded">Danger</button>
            <button type="button" class="btn btn-outline-warning btn-rounded">Warning</button>
            <button type="button" class="btn btn-outline-info btn-rounded">Info</button>
            <button type="button" class="btn btn-outline-dark btn-rounded">Dark</button>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header card-header-large bg-white">
          <h4 class="card-header__title">Button Sizes</h4>
        </div>
        <div class="card-body">
          <p>Add <code>.btn-lg</code> or <code>.btn-sm</code> classes for additional button sizes.</p>
          <div class="button-list">
            <button type="button" class="btn btn-primary btn-lg">Large</button>
            <button type="button" class="btn btn-info">Normal</button>
            <button type="button" class="btn btn-success btn-sm">Small</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg">
      <div class="card">
        <div class="card-header card-header-large bg-white">
          <h4 class="card-header__title">Button Icons</h4>
        </div>
        <div class="card-body">
          <p>Add icons to any button or even use Icon-only buttons.</p>
          <div class="button-list">
            <button type="button" class="btn btn-light">
              <i class="material-icons">favorite_border</i>
            </button>
            <button type="button" class="btn btn-danger">
              <i class="material-icons">close</i>
            </button>
            <button type="button" class="btn btn-dark">
              <i class="material-icons">music_note</i>
            </button>
            <button type="button" class="btn btn-primary">
              <i class="material-icons">star</i>
            </button>
            <button type="button" class="btn btn-success">
              <i class="material-icons">thumb_up</i>
            </button>
            <button type="button" class="btn btn-warning">
              <i class="material-icons">settings</i>
            </button>
            <br>
            <button type="button" class="btn btn-light">
              <i class="material-icons mr-1">favorite</i> Favorite
            </button>
            <button type="button" class="btn btn-warning">
              <i class="material-icons mr-1">launch</i> Launch
            </button>
            <button type="button" class="btn btn-info">
              <i class="material-icons mr-1">cloud</i> Cloud Hosting
            </button>
        </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header card-header-large bg-white">
          <h4 class="card-header__title">Button Block</h4>
        </div>
        <div class="card-body">
          <p>Create block level buttons, by adding add <code>.btn-block</code>.</p>
          <button type="button" class="btn btn-block btn-primary">Block Button</button>
          <button type="button" class="btn btn-block btn-success">Block Button</button>
          <button type="button" class="btn btn-block btn-sm btn-info">Block Button</button>
        </div>
      </div>
      <div class="card">
        <div class="card-header card-header-large bg-white">
          <h4 class="card-header__title">Button Group</h4>
        </div>
        <div class="card-body">
          <p>Create a group of buttons by wrapping with <code>.btn-group</code>.</p>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">Left</button>
            <button type="button" class="btn btn-light">Middle</button>
            <button type="button" class="btn btn-light">Right</button>
          </div>
          <br>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">1</button>
            <button type="button" class="btn btn-light">2</button>
            <button type="button" class="btn btn-light">3</button>
            <button type="button" class="btn btn-light">4</button>
          </div>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">5</button>
            <button type="button" class="btn btn-light">6</button>
            <button type="button" class="btn btn-light">7</button>
          </div>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">8</button>
          </div>
          <br>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-light">3</button>
            <div class="btn-group">
              <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Dropdown link</a>
                <a class="dropdown-item" href="#">Dropdown link</a>
              </div>
            </div>
          </div>
          <br>
          <div class="d-lg-flex">
            <div class="btn-group-vertical mb-2 mr-lg-1">
              <button type="button" class="btn btn-light">Top</button>
              <button type="button" class="btn btn-light">Middle</button>
              <button type="button" class="btn btn-light">Bottom</button>
            </div>
            <div class="btn-group-vertical mb-2">
              <button type="button" class="btn btn-light">Button 1</button>
              <button type="button" class="btn btn-light">Button 2</button>
              <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Button 3 <span class="caret"></span> </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Dropdown link</a>
                <a class="dropdown-item" href="#">Dropdown link</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
          <div class="card-header card-header-large bg-white">
            <h4 class="card-header__title">Disabled Buttons</h4>
          </div>
          <div class="card-body">
            <p>Add the <code>disabled</code> attribute to disable buttons.</p>
            <div class="button-list">
              <button type="button" class="btn btn-info" disabled="">Info</button>
              <button type="button" class="btn btn-success" disabled="">Success</button>
              <button type="button" class="btn btn-danger" disabled="">Danger</button>
              <button type="button" class="btn btn-dark" disabled="">Dark</button>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>
@endsection