117 lines
4.7 KiB
HTML
117 lines
4.7 KiB
HTML
{{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}}
|