{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{- block card(isDeleted, isLoading) -}}
<div class="bookmark-card" data-deleted="{{ isDeleted }}" data-loading="{{ isLoading }}">
{{ yield content }}
</div>
{{- end -}}

{{- block card_image(src, width, height) -}}
<img loading="lazy" alt="" src="{{ src }}" width="{{ width }}" height="{{ height }}">
{{- end -}}

{{- block progress_circle(value) -}}
{{ r := 65 }}
{{ c := 2*3.1416*r }}
{{ o := c * (100-value)/100}}
<svg class="{{ value == 100 ? `progress--completed` : ``}}" width="16" height="16" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle r="100" cx="100" cy="100" stroke-width="0"></circle>
  {{- if value < 100 -}}
    <g transform="rotate(-90, 100, 100)">
      <circle r="{{ r }}" cx="100" cy="100" fill="transparent" stroke-width="22" stroke-linecap="round" stroke-dashoffset="{{o}}px" stroke-dasharray="{{ c }}px"></circle>
    </g>
  {{- else -}}
    <path d="M63,95 l35,30 l42,-50" fill="transparent" stroke-width="24" stroke-linecap="round"></path>
  {{- end -}}
</svg>
{{- end -}}