{{define "cardword"}}
{{if .Revealed}}
<div id="card-{{.Word}}" style="
    background-color: {{.Color}};
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    min-width: 100px;
    text-align: center;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    cursor: pointer;"> {{.Word}}
</div>
{{else}}
<div id="card-{{.Word}}" style="
    background-color: #e4d5b7;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    min-width: 100px;
    text-align: center;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    cursor: pointer;"
    hx-get="/word/show-color?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.1s">
    {{.Word}}
</div>
{{end}}
{{end}}