{{define "cardword"}}
{{if .Revealed}}
  {{if eq .Color "amber"}}
    <div id="card-{{.Word}}" class="bg-{{.Color}}-100 border border-gray-500 p-4 rounded-lg min-w-[100px] text-center text-white cursor-pointer" 
         style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
    </div>
  {{else}}
    <div id="card-{{.Word}}" class="bg-{{.Color}}-400 border border-gray-500 p-4 rounded-lg min-w-[100px] text-center text-white cursor-pointer" 
         style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
    </div>
  {{end}}
{{else}}
<div id="card-{{.Word}}" class="bg-stone-400 border border-gray-500 rounded-lg min-w-[100px] cursor-pointer flex flex-col h-full">
     <div class="flex-grow text-center p-4 flex items-center justify-center text-white"
          style="text-shadow: 0 2px 4px rgba(0,0,0,0.8);"
          hx-get="/word/show-color?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
        {{.Word}}
     </div>
     <div class="h-6 bg-stone-600 rounded-b flex items-center justify-center text-white text-sm cursor-pointer"
          hx-get="/mark-card?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
         {{range .Mark}}
             {{if .Active}}
                 <span class="mx-0.5">X</span>
             {{end}}
         {{end}}
     </div>
</div>
{{end}}
{{end}}