---
import ButtonGroup from '@ui/ButtonGroup.astro'
import Icon from '@ui/Icon.astro'
import FormGroup from '@ui/FormGroup.astro'
import Avatar from '@ui/Avatar.astro'
---

<FormGroup label="Simple selectgroup">
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
      <span class="form-selectgroup-label">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">JavaScript</span>
    </label>
  </div>
</FormGroup>

<FormGroup label="Icon input">
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
      <span class="form-selectgroup-label"><Icon name="sun" /></span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="moon" class="form-selectgroup-input" />
      <span class="form-selectgroup-label"><Icon name="moon" /></span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" />
      <span class="form-selectgroup-label"><Icon name="cloud-rain" /></span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" />
      <span class="form-selectgroup-label"><Icon name="cloud" /></span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="Other" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">Other</span>
    </label>
  </div>
</FormGroup>

<FormGroup label="Selectgroup with icons and text">
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked />
      <span class="form-selectgroup-label"><Icon name="home" class="me-1" /> Home</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="user" class="form-selectgroup-input" />
      <span class="form-selectgroup-label"><Icon name="user" class="me-1" /> User</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="circle" class="form-selectgroup-input" />
      <span class="form-selectgroup-label"><Icon name="circle" class="me-1" /> Circle</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="square" class="form-selectgroup-input" />
      <span class="form-selectgroup-label"><Icon name="square" class="me-1" /> Square</span>
    </label>
  </div>
</FormGroup>

<FormGroup label="Different style">
  <div class="form-selectgroup form-selectgroup-pills">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked />
      <span class="form-selectgroup-label">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
      <span class="form-selectgroup-label">JavaScript</span>
    </label>
  </div>
</FormGroup>

<FormGroup label="Payment method">
  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input" />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-visa payment-xs me-2"></span>
          ending in <strong>7998</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-mastercard payment-xs me-2"></span>
          ending in <strong>1000</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input" />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-paypal payment-xs me-2"></span>
        </div>
      </div>
    </label>
  </div>
</FormGroup>

<FormGroup label="Project Manager">
  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <Avatar src="static/avatars/000m.jpg" class="me-3" />
          <div>
            <div class="fw-medium">Paweł Kuna</div>
            <div class="text-secondary">UI Designer</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input" checked />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <Avatar src="static/avatars/052f.jpg" class="me-3" />
          <div>
            <div class="fw-medium">Jeffie Lewzey</div>
            <div class="text-secondary">Chemical Engineer</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <Avatar src="static/avatars/002m.jpg" class="me-3" />
          <div>
            <div class="fw-medium">Mallory Hulme</div>
            <div class="text-secondary">Geologist IV</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <Avatar src="static/avatars/003m.jpg" class="me-3" />
          <div>
            <div class="fw-medium">Dunn Slane</div>
            <div class="text-secondary">Research Nurse</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" />
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <Avatar src="static/avatars/000f.jpg" class="me-3" />
          <div>
            <div class="fw-medium">Emmy Levet</div>
            <div class="text-secondary">VP Product Management</div>
          </div>
        </div>
      </div>
    </label>
  </div>
</FormGroup>

<FormGroup label="Buttons group">
  <ButtonGroup class="w-100">
    <input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-1" autocomplete="off" checked />
    <label for="btn-radio-basic-1" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">1 min</label>
    <input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-2" autocomplete="off" />
    <label for="btn-radio-basic-2" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">5 min</label>
    <input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-3" autocomplete="off" />
    <label for="btn-radio-basic-3" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">10 min</label>
    <input type="radio" class="btn-check" name="btn-radio-basic" id="btn-radio-basic-4" autocomplete="off" />
    <label for="btn-radio-basic-4" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">30 min</label>
  </ButtonGroup>
</FormGroup>

<FormGroup label="Buttons group with dropdown">
  <ButtonGroup class="w-100">
    <input type="radio" class="btn-check" name="btn-radio-dropdown" id="btn-radio-dropdown-1" autocomplete="off" checked />
    <label for="btn-radio-dropdown-1" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Option 1</label>
    <input type="radio" class="btn-check" name="btn-radio-dropdown" id="btn-radio-dropdown-2" autocomplete="off" />
    <label for="btn-radio-dropdown-2" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Option 2</label>
    <ButtonGroup>
      <input type="radio" class="btn-check" name="btn-radio-dropdown" id="btn-radio-dropdown-dropdown" autocomplete="off" />
      <label for="btn-radio-dropdown-dropdown" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </label>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#"> Action </a>
        <a class="dropdown-item" href="#"> Another action </a>
      </div>
      <div class="dropdown-menu dropdown-menu-end">
        <a class="dropdown-item" href="#"> Option 4 </a>
        <a class="dropdown-item" href="#"> Option 5 </a>
        <a class="dropdown-item" href="#"> Option 6 </a>
      </div>
    </ButtonGroup>
  </ButtonGroup>
</FormGroup>

<div class="row">
  <div class="col">
    <FormGroup label="Vertical buttons group">
      <ButtonGroup vertical={true} class="w-100">
        <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-1" autocomplete="off" checked />
        <label for="btn-radio-vertical-1" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 1</label>
        <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-2" autocomplete="off" />
        <label for="btn-radio-vertical-2" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 2</label>
        <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-3" autocomplete="off" />
        <label for="btn-radio-vertical-3" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 3</label>
        <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-4" autocomplete="off" />
        <label for="btn-radio-vertical-4" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 4</label>
        <input type="radio" class="btn-check" name="btn-radio-vertical" id="btn-radio-vertical-5" autocomplete="off" />
        <label for="btn-radio-vertical-5" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 5</label>
      </ButtonGroup>
    </FormGroup>
  </div>
  <div class="col">
    <FormGroup label="Vertical with dropdown">
      <ButtonGroup vertical={true} class="w-100">
        <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-1" autocomplete="off" checked />
        <label for="btn-radio-vertical-dropdown-1" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 1</label>
        <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-2" autocomplete="off" />
        <label for="btn-radio-vertical-dropdown-2" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 2</label>
        <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-3" autocomplete="off" />
        <label for="btn-radio-vertical-dropdown-3" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 3</label>
        <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-4" autocomplete="off" />
        <label for="btn-radio-vertical-dropdown-4" {...{ type: 'button' } as unknown as astroHTML.JSX.LabelHTMLAttributes} class="btn">Button 4</label>
        <ButtonGroup>
          <input type="radio" class="btn-check" name="btn-radio-vertical-dropdown" id="btn-radio-vertical-dropdown-dropdown" autocomplete="off" />
          <label for="btn-radio-vertical-dropdown-dropdown" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Other </label>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#"> Action </a>
            <a class="dropdown-item" href="#"> Another action </a>
          </div>
          <div class="dropdown-menu dropdown-menu-end">
            <a class="dropdown-item" href="#"> Option 4 </a>
            <a class="dropdown-item" href="#"> Option 5 </a>
            <a class="dropdown-item" href="#"> Option 6 </a>
          </div>
        </ButtonGroup>
      </ButtonGroup>
    </FormGroup>
  </div>
</div>

<FormGroup label="Toolbar">
  <ButtonGroup class="w-100">
    <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-1" autocomplete="off" checked />
    <label for="btn-radio-toolbar-1" class="btn btn-icon"><Icon name="bold" /></label>
    <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-2" autocomplete="off" />
    <label for="btn-radio-toolbar-2" class="btn btn-icon"><Icon name="italic" /></label>
    <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-3" autocomplete="off" />
    <label for="btn-radio-toolbar-3" class="btn btn-icon"><Icon name="underline" /></label>
    <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-4" autocomplete="off" />
    <label for="btn-radio-toolbar-4" class="btn btn-icon"><Icon name="copy" /></label>
    <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-5" autocomplete="off" />
    <label for="btn-radio-toolbar-5" class="btn btn-icon"><Icon name="scissors" /></label>
    <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-6" autocomplete="off" />
    <label for="btn-radio-toolbar-6" class="btn btn-icon"><Icon name="file-plus" /></label>
    <input type="radio" class="btn-check" name="btn-radio-toolbar" id="btn-radio-toolbar-7" autocomplete="off" />
    <label for="btn-radio-toolbar-7" class="btn btn-icon"><Icon name="file-minus" /></label>
  </ButtonGroup>
</FormGroup>