{% from "components/primitives/catalog_primitives.html" import alert, badge, button, button_group, dropdown, tabs, status_dot %}

<div class="row g-3">
  <div class="col-12 col-lg-6">
    {{ alert(title=samples.alert_title, message=samples.alert_message, tone='warning') }}
  </div>
  <div class="col-12 col-lg-6">
    <div class="card">
      <div class="card-body d-flex flex-column gap-3">
        <div>
          {{ badge('stable', 'primary') }}
          {{ badge(samples.unsafe_text, 'secondary') }}
        </div>
        <div class="d-flex gap-2 flex-wrap">
          {{ button('Primary action', 'primary') }}
          {{ button('Read-only action', 'secondary') }}
          {{ button_group(['One', 'Two', 'Three']) }}
        </div>
        <div>
          {{ dropdown('Menu sample', ['First item', samples.unsafe_text, 'Third item']) }}
        </div>
        <div>
          {{ tabs(samples.tabs, 'overview') }}
        </div>
        <div class="d-flex align-items-center gap-2">
          {{ status_dot(samples.status, samples.status_label) }}
        </div>
      </div>
    </div>
  </div>
</div>