<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>List | VA2NW Logger</title>

        <link rel="icon" href="/favicon.ico">

        {{> stylesheets }}

    </head>
    <body>

        {{> header }}

        <main>
            <section class="section">
                <h1 class="title">Search</h1>
                <form name="search" method="GET" action="/qsos">
                    <div class="field is-horizontal">
                        <div class="field-label is-normal">
                            <label class="label">Callsign</label>
                        </div>
                        <div class="field-body">
                            <div class="field">
                                <p class="control is-expanded">
                                    <input class="input callsign callsign_entry" id="callsign" type="text" name="callsign" value="{{callsign}}" autofocus autocomplete="off" />
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="field is-horizontal">
                        <div class="field-label is-normal">
                            <label class="label">Remarks</label>
                        </div>
                        <div class="field-body">
                            <div class="field">
                                <p class="control is-expanded">
                                    <input class="input" type="text" name="remarks" value="{{remarks}}" autocomplete="off" />
                                </p>
                            </div>
                        </div>
                    </div>

                    {{> station_callsign_select }}

                    {{> submit }}

                </form>
            </section>
            {{#if callsign}}
            <section class="section">
                <h1 class="title"><a name="callsign-lookup"></a>Callsign Lookup</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Service</th>
                            <th>Link</th>
                        <tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>QRZ</td>
                            <td><a href="https://www.qrz.com/db/{{callsign}}" target="_blank">https://www.qrz.com/db/{{callsign}}</a></td>
                        </tr>
                        <tr>
                            <td>HamCall</td>
                            <td><a href="https://hamcall.net/call?entry={{callsign}}" target="_blank">https://hamcall.net/call?entry={{callsign}}</a></td>
                        </tr>
                        <tr>
                            <td>Parks on the Air</td>
                            <td><a href="https://pota.app/#/profile/{{callsign}}" target="_blank">https://pota.app/#/profile/{{callsign}}</a></td>
                        </tr>
                        <tr>
                            <td>Summits on the Air</td>
                            <td><a href="https://www.sotadata.org.uk/en/stats/{{callsign}}" target="_blank">https://www.sotadata.org.uk/en/stats/{{callsign}}</a></td>
                        </tr>
                        <tr>
                            <td>YouTube</td>
                            <td><a href="https://www.youtube.com/results?search_query={{callsign}}" target="_blank">https://www.youtube.com/results?search_query={{callsign}}</a></td>
                        </tr>
                        <tr>
                            <td>SKCC</td>
                            <td><a href="https://www.skccgroup.com/membership_data/membership_search.php?search={{callsign}}" target="_blank">https://www.skccgroup.com/membership_data/membership_search.php?search={{callsign}}</a></td>
                        </tr>
                    </tbody>
                </table>
            </section>
            {{/if}}
            <section class="section">
                <h1 class="title">{{count}} QSOs</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Time On</th>
                            <th><abbr title="Frequency">Freq</abbr></th>
                            <th>Mode</th>
                            <th><abbr title="Power">Pwr<abbr></th>
                            <th>Callsign</th>
                            <th>RST</th>
                            <th>Name</th>
                            <th>QTH</th>
                            <th>Remarks</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each qsos}}
                        <tr data-qso_id="{{qso_id}}">
                            <td class="nowrap"><a href="/qsos/{{qso_id}}">{{dateon}} {{timeon}}</a></td>
                            <td class="nowrap">{{frequency}}</td>
                            <td class="nowrap center">{{mode}}</td>
                            <td class="nowrap center">{{power}}</td>
                            <td class="nowrap"><a href="/qsos?callsign={{callsign}}&remarks=&station_callsign=%25&since=1900-01-01T00%3A00%3A00Z"><span class="callsign">{{callsign}}</span></a></td>
                            <td class="nowrap">{{rst_sent}} / {{rst_rcvd}}</td>
                            <td class="nowrap">{{name}}</td>
                            <td class="nowrap">{{spc}}</td>
                            <td>{{remarks}}</td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>

                <div class="block">
                    <p class="has-text-centered">
                        Page {{currentPage}} of {{npages}}
                    </p>
                </div>

                <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                    <ul class="pagination-list">
                        {{#each pageNav}}
                            <li>
                                <a class="pagination-link" aria-label="Goto {{label}} page" href="/qsos?{{{query}}}">{{label}}</a>
                            </li>
                        {{/each}}
                    </ul>
                </nav>


            </section>
        </main>

        {{> footer }}

        {{> scripts }}

    </body>
</html>
