"""Semantic HTML for the Internal Alpha Monitoring Trends page."""


def monitoring_trends_content(can_view_locations: bool) -> str:
    location_options = (
        '<option value="site">Site</option><option value="room">Room</option>'
        if can_view_locations
        else ""
    )
    return f"""
<section class="trend-controls panel" aria-labelledby="trendControlsTitle">
    <div class="panel-head"><div><p class="eyebrow">Historical scope</p>
        <h2 id="trendControlsTitle">Trend controls</h2></div>
        <p class="freshness" id="trendFreshness">Not loaded</p></div>
    <form id="trendControls">
        <label for="trendScope">Scope
            <select id="trendScope">
                <option value="fleet">Fleet</option>{location_options}
            </select>
        </label>
        <label for="trendSite" id="trendSiteLabel" hidden>Site
            <select id="trendSite"></select>
        </label>
        <label for="trendRoom" id="trendRoomLabel" hidden>Room
            <select id="trendRoom"></select>
        </label>
        <fieldset class="trend-ranges">
            <legend>Time range</legend>
            <label><input type="radio" name="trendRange" value="6h">6 hours</label>
            <label><input type="radio" name="trendRange" value="24h" checked>24 hours</label>
            <label><input type="radio" name="trendRange" value="7d">7 days</label>
        </fieldset>
        <button class="command-button" type="submit">Apply</button>
    </form>
    <p class="panel-copy" id="trendScopeNote">Fleet trends use current miner inventory.</p>
</section>
<div class="state-message" id="trendLoading" role="status">
    <strong>Loading trends</strong><span>Aggregating bounded raw telemetry.</span>
</div>
<div class="state-message" id="trendError" data-kind="error" role="alert" hidden>
    <strong>Trends unavailable</strong><span id="trendErrorText">The request failed.</span>
    <button class="command-button" id="trendRetry" type="button">Retry</button>
</div>
<section id="trendContent" aria-label="Historical telemetry trends" hidden>
    <div class="trend-summary" aria-live="polite">
        <p><strong id="trendScopeLabel">Fleet</strong></p>
        <p id="trendRangeSummary"></p>
        <p id="trendTimezone"></p>
    </div>
    <div id="trendCharts" class="trend-charts"></div>
</section>
"""