kycnot.me/src/frontend/templates/attribute.html

<section class="pt-14">
    <div class="flex flex-col items-center justify-center space-x-4">
        <!--<h1 class="text-2xl font-bold capitalize-first">{{.Attribute.Title}}</h1>-->
        <!-- Description -->
        <div class="p-4 m-4
                    {{if eq 0 .Attribute.Rating}} border rounded-lg border-blue-600/40 bg-blue-600/20 {{end}}
                    {{if eq 1 .Attribute.Rating}} border rounded-lg border-green-600/40 bg-green-600/20 {{end}}
                    {{if eq 2 .Attribute.Rating}} border rounded-lg border-yellow-600/40 bg-yellow-600/20 {{end}}
                    {{if eq 3 .Attribute.Rating}} border rounded-lg border-red-600/40 bg-red-600/20 {{end}}
                    ">

            <h3 class="mb-3 text-lg font-bold uppercase border-b md:text-xl border-b-white/20">
                {{if eq 0 .Attribute.Rating}}
                    🔵
                {{end}}
                {{if eq 1 .Attribute.Rating}}
                    ✅
                {{end}}
                {{if eq 2 .Attribute.Rating}}
                    ⚠️
                {{end}}
                {{if eq 3 .Attribute.Rating}}
                    🛑
                {{end}}
                {{.Attribute.Title}}
            </h3>

            <p class="max-w-lg">
                {{if ne .Attribute.Description ""}}
                    {{.Attribute.Description}}
                {{else}}
                    {{.Attribute.Name}} does not have a description.
                {{end}}
            </p>
        </div>
    </div>
</section>

<!-- Services list -->
<section class="flex flex-col items-center justify-center px-1 mx-2 mt-6">
    <h2 class="text-lg font-bold uppercase">{{.Attribute.Title}} services:</h2>
    <div class="grid max-w-6xl grid-cols-1 gap-3 mt-2 md:grid-cols-2 lg:grid-cols-3">
        {{range .Services}}
            {{template "components/service_card" .}}
        {{end}}
    </div>
</section>