{% extends "base.html" %}
{% block content %}

<div class="card mt-5">
    <div class="card-header">
        Band Conditions
    </div>
    <div class="card-body">
        <div class="row row-cols-1 row-cols-md-2 g-3">
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">HF</h5>
                        <table class="table table-sm mt-2">
                            <thead>
                                <tr>
                                    <th>Band</th>
                                    <th>Day</th>
                                    <th>Night</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>80-40m</td>
                                    <td id="hf-conditions-80m-40m-day"></td>
                                    <td id="hf-conditions-80m-40m-night"></td>
                                </tr>
                                <tr>
                                    <td>30-20m</td>
                                    <td id="hf-conditions-30m-20m-day"></td>
                                    <td id="hf-conditions-30m-20m-night"></td>
                                </tr>
                                <tr>
                                    <td>17-15m</td>
                                    <td id="hf-conditions-17m-15m-day"></td>
                                    <td id="hf-conditions-17m-15m-night"></td>
                                </tr>
                                <tr>
                                    <td>12-10m</td>
                                    <td id="hf-conditions-12m-10m-day"></td>
                                    <td id="hf-conditions-12m-10m-night"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">VHF</h5>
                        <table class="table table-sm mt-2">
                            <thead>
                                <tr>
                                    <th>Propagation Mode</th>
                                    <th>Condition</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Sporadic-E 6m (Europe)</td>
                                    <td id="vhf-conditions-es_6m_europe"></td>
                                </tr>
                                <tr>
                                    <td>Sporadic-E 4m (Europe)</td>
                                    <td id="vhf-conditions-es_4m_europe"></td>
                                </tr>
                                <tr>
                                    <td>Sporadic-E 2m (Europe)</td>
                                    <td id="vhf-conditions-es_2m_europe"></td>
                                </tr>
                                <tr>
                                    <td>Sporadic-E 2m (North America)</td>
                                    <td id="vhf-conditions-es_2m_na"></td>
                                </tr>
                                <tr>
                                    <td>Aurora (Northern Hemisphere)</td>
                                    <td id="vhf-conditions-vhf_aurora_northern_hemi"></td>
                                </tr>
                                <tr>
                                    <td>Aurora Minimum Latitude</td>
                                    <td id="vhf-conditions-aurora-lat"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-text mt-3">Data from <a href="https://hamqsl.net">HamQSL.net</a>.</div>
    </div>
</div>

<div class="card mt-5">
    <div class="card-header">
        Solar Weather
    </div>
    <div class="card-body">
        <div class="row border-bottom py-2 align-items-start">
            <div class="col-12 col-md-2 fw-semibold">Solar Flux</div>
            <div class="col-12 col-md-3">
                <span class="me-3">SFI: <strong id="sw-sfi"></strong></span>
                <span>Sunspots: <strong id="sw-sunspots"></strong></span>
            </div>
            <div class="col-12 col-md-7 text-muted" id="sw-band-conditions-desc"></div>
        </div>
        <div class="row border-bottom py-2 align-items-start">
            <div class="col-12 col-md-2 fw-semibold">Geomagnetic</div>
            <div class="col-12 col-md-3">
                <span class="me-3">K: <strong id="sw-k-index"></strong></span>
                <span class="me-3">A: <strong id="sw-a-index"></strong></span>
                <span class="me-3"><strong>G</strong><strong id="sw-geomag-storm-scale"></strong></span>
                <span>Noise: <strong id="sw-geomag-noise"></strong></span>
            </div>
            <div class="col-12 col-md-7 text-muted">
                <span id="sw-geomag-field"></span><span class="mx-1 text-body-tertiary">, </span><span id="sw-geomag-storm-desc"></span>
            </div>
        </div>
        <div class="row border-bottom py-2 align-items-start">
            <div class="col-12 col-md-2 fw-semibold">X-ray Flux</div>
            <div class="col-12 col-md-3"><strong id="sw-x-ray"></strong></div>
            <div class="col-12 col-md-7 text-muted" id="sw-blackout-desc"></div>
        </div>
        <div class="row border-bottom py-2 align-items-start">
            <div class="col-12 col-md-2 fw-semibold">Proton Flux</div>
            <div class="col-12 col-md-3">
                <span class="me-3"><strong id="sw-proton-flux"></strong> pfu</span>
                <span class="me-3"><strong>S</strong><strong id="sw-solar-storm-scale"></strong></span>
            </div>
            <div class="col-12 col-md-7 text-muted" id="sw-proton-flux-desc"></div>
        </div>
        <div class="row py-2 align-items-start">
            <div class="col-12 col-md-2 fw-semibold">Electron Flux</div>
            <div class="col-12 col-md-3"><strong id="sw-electron-flux"></strong> efu</div>
            <div class="col-12 col-md-7 text-muted" id="sw-electron-flux-desc"></div>
        </div>
    </div>
</div>

<script src="/js/common.js?v=1774771259"></script>
<script src="/js/conditions.js?v=1774771259"></script>
<script>$(document).ready(function() { $("#nav-link-conditions").addClass("active"); }); <!-- highlight active page in nav --></script>

{% end %}