<article>
    <header>
        <h3>
            {% if data_type == 'hydro' %}Stacje hydrologiczne{% else %}Stacje meteorologiczne{% endif %}
            <small>({{ count }} wyników)</small>
        </h3>
    </header>

    {% if stations %}
    <figure>
        <table role="grid">
            <thead>
                <tr>
                    <th>ID stacji</th>
                    <th>Nazwa</th>
                    {% if data_type == 'hydro' %}
                    <th>Rzeka</th>
                    <th>ID cieku</th>
                    {% endif %}
                    <th>Akcje</th>
                </tr>
            </thead>
            <tbody>
                {% for station in stations %}
                <tr>
                    <td><code>{{ station.id }}</code></td>
                    <td>{{ station.name }}</td>
                    {% if data_type == 'hydro' %}
                    <td>{{ station.river or '-' }}</td>
                    <td><code>{{ station.river_id or '-' }}</code></td>
                    {% endif %}
                    <td>
                        <button class="outline secondary" onclick="copyStationId('{{ station.id }}')">
                            Kopiuj ID
                        </button>
                        {% if data_type == 'meteo' %}
                        <a href="https://hydro.imgw.pl/#/station/meteo/{{ station.id }}"
                           class="outline secondary" role="button" target="_blank">
                            Stacja IMGW
                        </a>
                        {% elif data_type == 'hydro' %}
                        <a href="https://hydro.imgw.pl/#/station/hydro/{{ station.id }}"
                           class="outline secondary" role="button" target="_blank">
                            Stacja IMGW
                        </a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </figure>
    {% else %}
    <p>Brak stacji spełniających kryteria wyszukiwania.</p>
    {% endif %}
</article>

<script>
    function copyStationId(id) {
        navigator.clipboard.writeText(id).then(() => {
            alert('Skopiowano ID stacji: ' + id);
        });
    }
</script>
