{{define "tabler_card"}}
{{$card := .}}
{{if $card.Link}}<a href="{{$card.Link}}" class="card{{if $card.Active}} card-active{{end}}{{if $card.Inactive}} card-inactive{{end}}{{if $card.Class}} {{$card.Class}}{{end}}">{{else}}<div class="card{{if $card.Active}} card-active{{end}}{{if $card.Inactive}} card-inactive{{end}}{{if $card.Class}} {{$card.Class}}{{end}}">{{end}}

  {{if $card.Empty}}
    {{template "tabler_card_empty" $card.Empty}}
  {{else}}

    {{if $card.Image}}
      {{if eq $card.Image.Position "top"}}
      <img src="{{$card.Image.Src}}" class="card-img-top" alt="">
      {{end}}
    {{end}}

    {{if $card.Status}}
      <div class="card-status-{{$card.Status.Position}} bg-{{defaultVal "blue" $card.Status.Color}}"></div>
    {{end}}

    {{if $card.Header}}
    <div class="card-header">
      {{if $card.Header.UseTabs}}
        <ul class="nav nav-tabs card-header-tabs">
          {{range $card.Header.Tabs}}
          <li class="nav-item">
            <a class="nav-link{{if .Active}} active{{end}}{{if .Disabled}} disabled{{end}}" href="{{defaultVal "#" .Link}}">{{.Title}}</a>
          </li>
          {{end}}
        </ul>
      {{else if $card.Header.UsePills}}
        <ul class="nav nav-pills card-header-pills">
          {{range $card.Header.Pills}}
          <li class="nav-item">
            <a class="nav-link{{if .Active}} active{{end}}{{if .Disabled}} disabled{{end}}" href="{{defaultVal "#" .Link}}">{{.Title}}</a>
          </li>
          {{end}}
        </ul>
      {{else}}
        <h3 class="card-title">{{defaultVal "Header title" $card.Header.Title}}</h3>
      {{end}}
    </div>
    {{end}}

    {{if $card.Alert}}
    <div class="card-alert alert alert-{{defaultVal "success" $card.Alert.Type}} mb-0">
      {{$card.Alert.Text}}
    </div>
    {{end}}

    {{with $card.Body}}
    <div class="card-body">
      {{if .Title}}<h3 class="card-title">{{.Title}}</h3>{{end}}
      {{if .Subtitle}}<div class="card-subtitle">{{.Subtitle}}</div>{{end}}
      <p class="text-secondary">{{defaultVal "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem." .Text}}</p>
      {{if .HasButton}}
      <div class="card-text">
        <a href="{{defaultVal "#" .ButtonLink}}" class="btn btn-primary">{{defaultVal "Go somewhere" .ButtonText}}</a>
      </div>
      {{end}}
    </div>
    {{end}}

    {{with $card.Footer}}
    <div class="card-footer">
      {{if or .HasSwitch .HasCheck .HasAvatars .HasMore}}
      <div class="row align-items-center">
        {{if .HasSwitch}}
        <div class="col-auto"><label class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" checked></label></div>
        {{end}}
        {{if .HasCheck}}
        <div class="col-auto"><label class="form-check m-0"><input class="form-check-input" type="checkbox" checked></label></div>
        {{end}}
        {{if .HasAvatars}}
        <div class="col-auto"><div class="avatar-list avatar-list-stacked"><span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span><span class="avatar avatar-sm" style="background-image: url(/static/avatars/052f.jpg)"></span><span class="avatar avatar-sm" style="background-image: url(/static/avatars/002m.jpg)"></span><span class="avatar avatar-sm">+3</span></div></div>
        {{end}}
        {{if .HasMore}}
        <div class="col-auto ms-auto"><a href="#">More information</a></div>
        {{end}}
      </div>
      {{else if .Button}}
      <a href="{{defaultVal "#" .ButtonLink}}" class="btn btn-primary">{{.Button}}</a>
      {{else if and .ButtonsCancel .ButtonsAction}}
      <div class="d-flex">
        <a href="#" class="btn btn-link">{{.ButtonsCancel}}</a>
        <a href="{{defaultVal "#" .ButtonsActionLink}}" class="btn btn-primary ms-auto">{{.ButtonsAction}}</a>
      </div>
      {{else}}
      {{defaultVal "This is standard card footer" .Text}}
      {{end}}
    </div>
    {{end}}

    {{if $card.Image}}
      {{if eq $card.Image.Position "bottom"}}
      <img src="{{$card.Image.Src}}" class="card-img-bottom" alt="">
      {{end}}
    {{end}}

    {{if $card.Progress}}
    <div class="progress progress-sm card-progress">
      <div class="progress-bar{{if $card.Progress.Color}} bg-{{$card.Progress.Color}}{{end}}" style="width: {{$card.Progress.Percent}}%"></div>
    </div>
    {{end}}

  {{end}}

{{if $card.Link}}</a>{{else}}</div>{{end}}
{{end}}

{{define "tabler_card_empty"}}
<div class="empty">
  <div class="empty-img">
    <img src="/public/static/illustrations/not-found.svg" height="160" alt="">
  </div>
  <p class="empty-title">No results found</p>
  <p class="empty-subtitle text-secondary">Try adjusting your search or filter criteria.</p>
</div>
{{end}}