<template>
  <ul class="list-group listGroup thin-scroll">
    <li class="list-group-item listGroupItem">
      <span class="text-muted float-end">60%</span>
      <h6 class="m-0 mb-1 text-gray">
        <strong>Urgent:</strong>
        &nbsp;Rails 4.1.0 upgrade
      </h6>
      <div class="progress progress-xs m-0">
        <div
          class="progress-bar bg-primary"
          role="progressbar"
          style="width: 60%"
          aria-valuenow="60"
          aria-valuemin="0"
          aria-valuemax="100"
        />
      </div>
      <span class="help-block">3 notes added by James 2h ago...</span>
    </li>
    <li class="list-group-item listGroupItem">
      <span class="text-muted float-end">83%</span>
      <h6 class="m-0 mb-1 text-gray">
        <strong>Primary:</strong>
        &nbsp;Sing Web App
      </h6>
      <div class="progress progress-xs m-0">
        <div
          class="progress-bar bg-success"
          role="progressbar"
          style="width: 83%"
          aria-valuenow="83"
          aria-valuemin="0"
          aria-valuemax="100"
        />
      </div>
      <span class="help-block">verifying stable probability status</span>
    </li>
    <li class="list-group-item listGroupItem">
      <span class="text-muted float-end">44%</span>
      <h6 class="m-0 mb-1">
        <span
          class="circle bg-gray-dark text-warning"
          data-bs-toggle="tooltip"
          data-bs-placement="bottom"
          title="2 issues require your attention"
        >
          <i class="fa fa-question" />
        </span>
        &nbsp;
        Finish The Road to Hell Song
      </h6>
      <div class="progress progress-xs m-0">
        <div
          class="progress-bar bg-gray-dark"
          role="progressbar"
          style="width: 44%"
          aria-valuenow="44"
          aria-valuemin="0"
          aria-valuemax="100"
        />
      </div>
      <span class="help-block">last update: 2h ago</span>
    </li>
    <li class="list-group-item listGroupItem">
      <span class="text-muted float-end">86%</span>
      <h6 class="m-0 mb-1 deemphasize text-gray">
        Complete project planning
      </h6>
      <div class="progress progress-xs m-0">
        <div
          class="progress-bar bg-danger"
          role="progressbar"
          style="width: 86%"
          aria-valuenow="86"
          aria-valuemin="0"
          aria-valuemax="100"
        />
      </div>
      <span class="help-block">no, no way this is not working...</span>
    </li>
    <li class="list-group-item listGroupItem">
      <span class="text-muted float-end">100%</span>
      <h6 class="m-0 mb-1 deemphasize text-gray">
        <strong>Completed:</strong>
        &nbsp;Instruct newbies on coding standards
      </h6>
      <div class="progress progress-xs m-0">
        <div
          class="progress-bar bg-primary"
          role="progressbar"
          style="width: 100%"
          aria-valuenow="100"
          aria-valuemin="0"
          aria-valuemax="100"
        />
      </div>
      <span class="help-block">last update: April 22, 2014 2:36 pm</span>
    </li>
  </ul>
</template>

<script setup>
// Progress component
</script>
