<!DOCTYPE HTML5>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.htm}">

<head>
    <title>test</title>
</head>

<body>
    <div layout:fragment="content">
        <sl-card  class="card-overview">

            <div slot="header">
              <sl-tooltip>
                <div th:text="${pdf.slug}" slot="content">path</div>
                <sl-badge th:text="${pdf.index}">{pdf.index}</sl-badge>
              </sl-tooltip>
             
              <a th:href="@{/pdfs/{pdf.id}/raw}" href="/app/pdfs/{pdf.id}/details"><small>{pdf}</small></a>
              <sl-button-group label="History">
                <sl-icon-button name="file-earmark-pdf" label="Settings"
                th:href="@{/pdfs/{pdf.id}/raw}" href="/app/pdfs/{pdf.id}/view"></sl-icon-button>
                 
              </sl-button-group>
            </div>
    
            <div style="display:flex;">
              <div>
                <a href="/app/pdfs/{pdf.id}/details" class="holder center">
                  <img src="/app/pdfs/{pdf.id}/cover" loading="{index >10?'lazy':'eager'}"
                    alt="A kitten sits patiently." />
                </a>
              </div>
              <div>
                slug:<br /><small  th:text="${pdf.id}">{pdf.id}</small><br />
              </div>
            </div>
          </sl-card>
    </div>
</body>

</html>