<div class="d-flex flex-wrap gap-2 align-items-center">
  <a href="#" class="btn bg-gradient-primary mb-0">Основна дія</a>
  <a href="#" class="btn btn-outline-primary mb-0">Друга дія</a>
  <a href="#" class="btn btn-outline-dark mb-0">Нейтральна</a>
  <a href="#" class="btn btn-accent mb-0">Акцент</a>
  <a href="#" class="btn bg-gradient-dark mb-0">Темна</a>
  <a href="#" class="btn bg-gradient-danger mb-0">Видалити</a>
</div>

<div class="d-flex flex-wrap gap-2 align-items-center">
  <span class="badge bg-gradient-primary">Ветерани</span>
  <span class="badge bg-gradient-primary">Військові</span>
  <span class="badge bg-gradient-primary">Родини</span>
  <span class="badge bg-accent">Нове</span>
  <span class="badge bg-gradient-dark">Ветеранський бізнес</span>
  <span class="badge bg-gradient-success">Опубліковано</span>
  <span class="badge bg-gradient-secondary">Чернетка</span>
  <span class="badge bg-gradient-info">На модерації</span>
  <span class="badge bg-gradient-danger">Відхилено</span>
</div>

<form class="row g-3">
  <div class="col-md-6">
    <label class="form-label" for="ex-email">Електронна пошта</label>
    <input id="ex-email" type="email" class="form-control" placeholder="[email protected]">
  </div>
  <div class="col-md-6">
    <label class="form-label" for="ex-who">Для кого</label>
    <select id="ex-who" class="form-control">
      <option>Усі</option>
      <option>Ветерани</option>
      <option>Військові</option>
      <option>Родини</option>
    </select>
  </div>
  <div class="col-md-6">
    <label class="form-label" for="ex-error">Поле з помилкою</label>
    <input id="ex-error" type="text" class="form-control is-invalid" value="12">
    <p class="text-danger text-sm mb-0 mt-1">Пароль має містити щонайменше 10 символів.</p>
  </div>
  <div class="col-md-6 d-flex flex-column justify-content-end gap-2">
    <div class="form-check form-switch mb-0">
      <input class="form-check-input" type="checkbox" id="ex-online" checked>
      <label class="form-check-label" for="ex-online">Працюємо онлайн</label>
    </div>
    <div class="form-check mb-0">
      <input class="form-check-input" type="checkbox" id="ex-vet">
      <label class="form-check-label" for="ex-vet">Бізнес заснований ветераном або ветеранкою</label>
    </div>
  </div>
</form>

<div class="d-flex flex-column gap-2">
  <div class="alert alert-success text-sm mb-0" role="alert">Зміни збережено.</div>
  <div class="alert alert-info text-sm mb-0" role="alert">Ми надіслали лист на вашу пошту. Перевірте також папку «Спам».</div>
  <div class="alert alert-warning text-sm mb-0" role="alert">Спочатку створіть профіль бізнесу, а потім додайте знижку.</div>
  <div class="alert alert-danger text-sm mb-0" role="alert">Не вдалося увійти. Перевірте пошту й пароль.</div>
</div>

<div class="row g-3">
  <div class="col-sm-4">
    <div class="card pd-feature-card border-radius-xl shadow-sm h-100"><div class="card-body p-4">
      <p class="pd-stat mb-1">128</p>
      <p class="text-sm text-muted mb-0">Знижок</p>
    </div></div>
  </div>
  <div class="col-sm-4">
    <div class="card pd-feature-card border-radius-xl shadow-sm h-100"><div class="card-body p-4">
      <p class="pd-stat mb-1">54</p>
      <p class="text-sm text-muted mb-0">Бізнеси</p>
    </div></div>
  </div>
  <div class="col-sm-4">
    <div class="card pd-feature-card border-radius-xl shadow-sm h-100"><div class="card-body p-4">
      <p class="pd-stat mb-1">17</p>
      <p class="text-sm text-muted mb-0">Вакансій</p>
    </div></div>
  </div>
</div>

<div class="row g-3">
  <div class="col-md-6">
    <label class="pd-choice card border-radius-xl h-100">
      <input type="radio" name="ex-choice" value="browse" class="pd-choice-input" checked>
      <span class="card-body p-4 d-block">
        <span class="h5 font-weight-bolder d-block mb-1">Шукаю знижки й роботу</span>
        <span class="text-sm text-muted d-block">Покажемо каталог і як ним користуватися.</span>
      </span>
    </label>
  </div>
  <div class="col-md-6">
    <label class="pd-choice card border-radius-xl h-100">
      <input type="radio" name="ex-choice" value="business" class="pd-choice-input">
      <span class="card-body p-4 d-block">
        <span class="h5 font-weight-bolder d-block mb-1">Хочу додати бізнес</span>
        <span class="text-sm text-muted d-block">Знижка, вакансія або ветеранський бізнес.</span>
      </span>
    </label>
  </div>
</div>

{% load static %}
<div class="card border-radius-xl shadow-sm text-center" style="max-width: 30rem;">
  <div class="card-body p-5">
    <img src="{% static 'img/brand/mark.svg' %}" alt="" width="48" height="48" class="mb-3 opacity-8">
    <h3 class="h5 font-weight-bolder mb-2">Тут поки порожньо</h3>
    <p class="text-sm text-muted mb-3">Коли ви додасте першу знижку, вона зʼявиться в цьому списку.</p>
    <a href="#" class="btn btn-sm bg-gradient-primary mb-0">Додати знижку</a>
  </div>
</div>

<div class="pd-band border-radius-xl p-4 p-md-5">
  <p class="pd-eyebrow mb-2" style="color: var(--pd-sand);">Для бізнесу</p>
  <h3 class="h3 font-weight-bolder mb-2">Маєте бізнес і хочете <span class="pd-accent">подякувати</span>?</h3>
  <p class="mb-3">Додайте знижку або вакансію. Це займає кілька хвилин.</p>
  <a href="#" class="btn btn-accent mb-0">Додати знижку</a>
</div>