---
import CardActions from '@ui/CardActions.astro'
import Icon from '@ui/Icon.astro'
import Flag from '@ui/Flag.astro'
import CardTitle from '@ui/CardTitle.astro'
---

<div class="card">
  <div class="card-header">
    <CardTitle> Configuration </CardTitle>
    <CardActions>
      <a href="#">
        Edit configuration<Icon name="edit" class="ms-1" />
      </a>
    </CardActions>
  </div>
  <div class="card-body">
    <dl class="row">
      <dt class="col-5">Date:</dt>
      <dd class="col-7">2020-01-05 16:42:29 UTC</dd>

      <dt class="col-5">Account:</dt>
      <dd class="col-7">tabler</dd>

      <dt class="col-5">Location:</dt>
      <dd class="col-7"><Flag flag="pl" size="xxs" /> Poland</dd>

      <dt class="col-5">IP Address:</dt>
      <dd class="col-7">46.113.11.3</dd>

      <dt class="col-5">Operating system:</dt>
      <dd class="col-7">OS X 10.15.2 64-bit</dd>

      <dt class="col-5">Browser:</dt>
      <dd class="col-7">Chrome</dd>
    </dl>
  </div>
</div>