{{define "spot"}}
<table class="table-auto rounded-tl-sm w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
    <tr>
        <th scope="col" class="px-6 py-3">DX</th>
        <th scope="col" class="px-6 py-3">Spotter</th>
        <th scope="col" class="px-6 py-3">Freq</th>
        <th scope="col" class="px-6 py-3">Band</th>
        <th scope="col" class="px-6 py-3">Mode</th>
        <th scope="col" class="px-6 py-3">UTC Time</th>
        <th scope="col" class="px-6 py-3">Comment</th>
    </tr>
    </thead>
    <tbody>
        {{ range .}}
        <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 h-2">
        {{ if .NewDXCC }} <th scope="row" class="px-1 py-1 font-medium text-green-900 whitespace-nowrap dark:text-white"> {{ else if .NewMode }}<th scope="row" class="px-1 py-1 font-medium text-red-900 whitespace-nowrap dark:text-white"> {{ else }} <th scope="row" class="px-1 py-1 font-medium text-gray-900 whitespace-nowrap dark:text-white">{{ end }} {{ .DX }}</th>
        <td class="text-center px-1 py-1">{{ .SpotterCallsign }}</td>
        <td class="text-center px-1 py-1">{{ .FrequencyHz }}</td>
        <td class="text-center px-1 py-1">{{ .Band }}</td>
        <td class="text-center px-1 py-1">{{ .Mode }}</td>
        <td class="text-center px-1 py-1">{{ .UTCTime }}</td>
        <td class="text-center px-1 py-1">{{ .Comment }}</td>
    </tr>
    {{ end }}
    </tbody>
</table>
{{end}}