| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 | <!doctype html><html>    <head>        <title>Search results for "{{.SearchPhrase}}"</title>        <style>		table, th, td {                	border: 1px solid black;	                border-collapse: collapse;        	}		th {			cursor: pointer;		}        </style>    </head>    <body>        <a href="/">Search again</a>            <table>                <tr style='text-align: left'>                    <th>Source</th>                    <th>Translation</th>                    <th>TM</th>                </tr>        	{{range $result := .Results}}                	{{range $segment := $result.Segments}}	                    <tr style='text-align: left'>                	        <td>{{$segment.Source}}</td>                        	<td>{{$segment.Target}}</td>				<td>{{$result.TMName}}</td>	                    </tr>        	        {{end}}        	{{end}}            </table>            <br/>            <a href="/">Search again</a>	<script>		// borrowed from https://stackoverflow.com/a/49041392/7342859		const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;		const comparer = (idx, asc) => (a, b) => ((v1, v2) => 		    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)		    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));		// do the work...		document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {		const table = th.closest('table');		    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))		        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))		        .forEach(tr => table.appendChild(tr) );		})));	</script>    </body></html>
 |