<template>
  <div>
    <h1 class="page-title">
      Colors
    </h1>
    <b-row>
      <b-col xs="12">
        <Widget
          title="<h5>States <span class='fw-semi-bold'>Colors</span></h5>"
          custom-header
          close
          collapse
        >
          <p>
            Sing comes with a number of state colors that can be applied to
            the most of elements and components. It reuses Bootstrap's original 6 states:
          </p>
          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th>STATE</th>
                  <th>PREVIEW</th>
                  <th>CLASS POSTFIX</th>
                  <th>USAGE EXAMPLE</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="row in tableData"
                  :key="row.id"
                >
                  <th
                    scope="row"
                    class="fw-thin"
                  >
                    {{ row.state }}
                  </th>
                  <td><span :class="`circle bg-${row.state.toLowerCase()}`">&nbsp;</span></td>
                  <td><code>*-{{ row.state.toLowerCase() }}</code></td>
                  <td>
                    <code
                      v-for="(usage, idx) in row.usage"
                      :key="usage + idx"
                      class="me-1"
                    >{{ usage }}</code>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </Widget>
      </b-col>
    </b-row>
    <b-row>
      <b-col
        xs="12"
        md="6"
      >
        <Widget
          title="<h5>Text <span class='fw-semi-bold'>Colors</span></h5>"
          custom-header
          close
          collapse
        >
          <p>
            Convey meaning through color with a handful of color utility classes.
            Includes support for styling links with hover states, too. Use <code>text-*</code>
            class to fill text.
          </p>
          <div class="widget-padding-md w-100 h-100 text-start border rounded">
            <b-row>
              <b-col sm="12">
                <h1 class="text-danger">
                  h1. Heading
                </h1>
                <h2 class="text-warning">
                  h2. Heading
                </h2>
                <h3 class="text-success">
                  h3. Heading
                </h3>
                <h4 class="text-primary">
                  h4. Heading
                </h4>
                <h5 class="text-info">
                  h5. Heading
                </h5>
                <h6 class="text-secondary">
                  h6. Heading
                </h6>
              </b-col>
            </b-row>
          </div>
        </Widget>
      </b-col>
      <b-col
        xs="12"
        md="6"
      >
        <Widget
          title="<h5>Example <span class='fw-semi-bold'>buttons</span></h5>"
          close
          collapse
          custom-header
        >
          <p>
            Use any of the available button classes to quickly create a styled button.
            Semantically distinguishable beauty.
          </p>
          <b-button
            class="width-100 mb-3 me-3"
            variant="secondary"
          >
            Default
          </b-button>
          <b-button
            class="width-100 mb-3 me-3"
            variant="primary"
          >
            Primary
          </b-button>
          <b-button
            class="width-100 mb-3 me-3"
            variant="info"
          >
            Info
          </b-button>
          <b-button
            class="width-100 mb-3 me-3"
            variant="success"
          >
            Success
          </b-button>
          <b-button
            class="width-100 mb-3 me-3"
            variant="warning"
          >
            Warning
          </b-button>
          <b-button
            class="width-100 mb-3 me-3"
            variant="danger"
          >
            Danger
          </b-button>
          <b-button
            class="width-100 mb-3 me-3"
            variant="secondary"
          >
            Gray
          </b-button>
          <b-button
            class="width-100 mb-3 me-3"
            variant="dark"
          >
            Inverse
          </b-button>
        </Widget>
      </b-col>
    </b-row>
  </div>
</template>

<script setup lang="ts">
interface TableRow {
  id: number
  state: string
  usage: string[]
}

const tableData: TableRow[] = [
  {
    id: 0,
    state: 'Success',
    usage: ['text-success', 'btn-success'],
  },
  {
    id: 1,
    state: 'Warning',
    usage: ['bg-primary', 'bg-primary'],
  },
  {
    id: 2,
    state: 'Danger',
    usage: ['btn-danger', 'text-danger'],
  },
  {
    id: 3,
    state: 'Info',
    usage: ['alert-info', 'badge-info'],
  },
  {
    id: 4,
    state: 'Primary',
    usage: ['bg-primary', 'text-primary'],
  },
  {
    id: 5,
    state: 'Secondary',
    usage: ['bg-secondary'],
  },
]
</script>
