{% set donated = node_me.donated %}
{% set node_settings = node_me.settings %}
<div class="profile-panel node-donation" id="node-donation" data-node-donation data-username="{{ profile_user['username'] }}" data-max-devices="{{ node_me.max_devices }}">
    <section class="node-section" id="node-explainer">
        <h3>Donate to the community</h3>
        <p class="privacy-intro">Some sites refuse requests that come from data centres. By donating a little of your internet connection, community search can reach those public pages through yours.</p>
        <div class="node-explain-grid">
            <div class="node-explain-card">
                <h4>What you share</h4>
                <ul>
                    <li>A small part of your bandwidth, within the daily limit you set.</li>
                    <li>Your public IP address, as seen by the site that is fetched.</li>
                    <li>Requests for public pages on a fixed allowlist of sites, nothing else.</li>
                </ul>
            </div>
            <div class="node-explain-card">
                <h4>What you never share</h4>
                <ul>
                    <li>Your cookies, logins and accounts are never used.</li>
                    <li>Your browsing history, tabs and files are never touched.</li>
                    <li>You can switch it off at any time, here or by stopping the client.</li>
                </ul>
            </div>
        </div>
        <p class="privacy-intro">Read the full details in <a href="/docs/nodes.html">Donate your connection</a> and the <a href="/docs/privacy.html">Privacy Policy</a>. Check the terms of use of your internet line before running a node on a residential or business connection.</p>
    </section>

    <section class="node-section" id="node-consent">
        <h3>Your consent</h3>
        <div class="node-row">
            <label class="notif-switch">
                <input type="checkbox" id="node-consent-toggle" data-node-consent aria-label="Share part of my internet connection with the community" {% if node_me.consent %}checked{% endif %}>
                <span class="notif-switch-track"></span>
            </label>
            <span class="node-row-label">I agree to share part of my internet connection with the community</span>
            <span class="status-badge {{ 'status-actioned' if node_me.consent else 'status-dismissed' }}" id="node-consent-state" data-node-consent-state>{{ 'granted' if node_me.consent else 'withdrawn' }}</span>
        </div>
        <p class="node-hint" id="node-consent-message" role="status" aria-live="polite"></p>
    </section>

    <div id="node-body" data-node-body {% if not node_me.consent %}hidden{% endif %}>
        <p class="node-notice" id="node-notice" role="status" aria-live="polite" {% if node_me.can_donate %}hidden{% endif %}>{{ node_me.message }}</p>

        <section class="node-section" id="node-donated">
            <h3>Donated by you</h3>
            <div class="node-stats">
                <div class="node-stat"><span class="node-stat-label">Requests served</span><span class="node-stat-value" data-node-stat="lifetime_requests">{{ donated.lifetime_requests }}</span></div>
                <div class="node-stat"><span class="node-stat-label">Data transferred</span><span class="node-stat-value" data-node-stat="lifetime_bytes">{{ ((donated.lifetime_bytes or 0) / 1048576) | round(1) }} MB</span></div>
                <div class="node-stat"><span class="node-stat-label">This month</span><span class="node-stat-value" data-node-stat="month_requests">{{ donated.month_requests }}</span><span class="node-stat-sub">requests, <span data-node-stat="month_bytes_up">{{ ((donated.month_bytes_up or 0) / 1048576) | round(1) }} MB</span> up, <span data-node-stat="month_bytes_down">{{ ((donated.month_bytes_down or 0) / 1048576) | round(1) }} MB</span> down</span></div>
                <div class="node-stat"><span class="node-stat-label">Today</span><span class="node-stat-value" data-node-stat="today_requests">{{ donated.today_requests }}</span><span class="node-stat-sub">requests, <span data-node-stat="today_bytes">{{ ((donated.today_bytes or 0) / 1048576) | round(1) }} MB</span></span></div>
                <div class="node-stat"><span class="node-stat-label">First donated</span><span class="node-stat-value node-stat-date" data-node-stat-date="first_donated_at">{% if donated.first_donated_at %}{{ local_dt(donated.first_donated_at, 'date') }}{% else %}never{% endif %}</span></div>
                <div class="node-stat"><span class="node-stat-label">Last donated</span><span class="node-stat-value node-stat-date" data-node-stat-date="last_donated_at">{% if donated.last_donated_at %}{{ local_dt(donated.last_donated_at, 'date') }}{% else %}never{% endif %}</span></div>
            </div>
        </section>

        <section class="node-section" id="node-settings">
            <h3>Settings</h3>
            <form id="node-settings-form" class="node-form" data-node-settings-form>
                <div class="node-row">
                    <label class="notif-switch">
                        <input type="checkbox" id="node-enabled" name="enabled" aria-label="Donation switched on" {% if node_settings.enabled %}checked{% endif %}>
                        <span class="notif-switch-track"></span>
                    </label>
                    <span class="node-row-label">Donation is switched on</span>
                </div>
                <div class="node-fields">
                    <label class="node-field" for="node-bandwidth"><span>Daily bandwidth (MB)</span>
                        <input type="number" id="node-bandwidth" name="bandwidth_mb_day" min="1" max="{{ node_me.limits.max_donor_mb_per_day }}" value="{{ node_settings.bandwidth_mb_day }}">
                    </label>
                    <label class="node-field" for="node-concurrent"><span>Simultaneous requests</span>
                        <input type="number" id="node-concurrent" name="max_concurrent" min="1" max="{{ node_me.limits.max_concurrent_per_node }}" value="{{ node_settings.max_concurrent }}">
                    </label>
                    <label class="node-field" for="node-active-from"><span>Active from</span>
                        <input type="time" id="node-active-from" name="active_from" value="{{ node_settings.active_from }}">
                    </label>
                    <label class="node-field" for="node-active-to"><span>Active until</span>
                        <input type="time" id="node-active-to" name="active_to" value="{{ node_settings.active_to }}">
                    </label>
                    <label class="node-field" for="node-timezone"><span>Timezone</span>
                        <input type="text" id="node-timezone" name="timezone" list="node-timezones" maxlength="64" value="{{ node_settings.timezone }}">
                        <datalist id="node-timezones"></datalist>
                    </label>
                </div>
                <p class="node-hint">Leave both hours empty to donate at any time of day.</p>
                <fieldset class="node-platforms" id="node-platforms">
                    <legend>Sites you allow</legend>
                    {% for platform in node_me.platforms %}
                    <label class="node-check"><input type="checkbox" class="node-platform" name="allowed_platforms" value="{{ platform }}" {% if platform in node_settings.allowed_platforms %}checked{% endif %}><span>{{ platform }}</span></label>
                    {% endfor %}
                </fieldset>
                <div class="node-row">
                    <label class="notif-switch">
                        <input type="checkbox" id="node-pause-battery" name="pause_on_battery" aria-label="Pause on battery" {% if node_settings.pause_on_battery %}checked{% endif %}>
                        <span class="notif-switch-track"></span>
                    </label>
                    <span class="node-row-label">Pause while running on battery</span>
                </div>
                <div class="node-row">
                    <label class="notif-switch">
                        <input type="checkbox" id="node-public-display" name="public_display" aria-label="Show me on the donor leaderboard" {% if node_settings.public_display %}checked{% endif %}>
                        <span class="notif-switch-track"></span>
                    </label>
                    <span class="node-row-label">Show my name on the donor leaderboard</span>
                </div>
                <div class="node-actions">
                    <button type="submit" class="btn btn-sm btn-primary" id="node-settings-save">Save settings</button>
                    <span class="ai-correction-status" id="node-settings-status" role="status" aria-live="polite"></span>
                </div>
            </form>
        </section>

        <section class="node-section" id="node-devices-section">
            <h3>Your devices</h3>
            <p class="node-hint">Each machine or browser that donates is a device with its own secret. You can have up to {{ node_me.max_devices }}.</p>
            <ul class="node-devices" id="node-devices" data-node-devices>
                {% for device in node_me.devices %}
                <li class="node-device" data-uid="{{ device.uid }}">
                    <div class="node-device-main">
                        <span class="node-device-label">{{ device.label or device.uid }}</span>
                        <span class="status-badge status-{{ 'actioned' if device.status == 'active' else ('open' if device.status == 'suspended' else 'dismissed') }}">{{ device.status }}</span>
                    </div>
                    <div class="node-device-meta">
                        <span>{{ device.kind }}{% if device.platform %} / {{ device.platform }}{% endif %}</span>
                        <span>{{ device.country or 'unknown country' }}, {{ device.asn_class }}</span>
                        <span>Last seen {% if device.last_seen_at %}{{ local_dt(device.last_seen_at, 'ago') }}{% else %}never{% endif %}</span>
                    </div>
                    <div class="node-device-actions">
                        <button type="button" class="btn btn-sm node-device-rotate" data-uid="{{ device.uid }}">New secret</button>
                        <button type="button" class="btn btn-sm btn-danger node-device-remove" data-uid="{{ device.uid }}" data-confirm="Remove this device? It disconnects at once and its secret stops working." data-confirm-danger data-confirm-title="Remove device" data-confirm-label="Remove">Remove</button>
                    </div>
                </li>
                {% endfor %}
            </ul>
            <p class="node-hint" id="node-devices-empty" {% if node_me.devices %}hidden{% endif %}>No devices yet. Add one below.</p>

            <form id="node-device-form" class="node-form" data-node-device-form>
                <div class="node-fields">
                    <label class="node-field" for="node-device-label"><span>Label</span>
                        <input type="text" id="node-device-label" name="label" maxlength="60" placeholder="Home laptop">
                    </label>
                    <label class="node-field" for="node-device-kind"><span>Kind</span>
                        <select id="node-device-kind" name="kind">
                            <option value="native">Native client</option>
                            <option value="extension">Browser extension</option>
                            <option value="container">Container</option>
                        </select>
                    </label>
                    <label class="node-field" for="node-device-platform"><span>Platform</span>
                        <select id="node-device-platform" name="platform">
                            <option value="linux">Linux</option>
                            <option value="macos">macOS</option>
                            <option value="windows">Windows</option>
                            <option value="chrome">Chrome</option>
                            <option value="firefox">Firefox</option>
                            <option value="other">Other</option>
                        </select>
                    </label>
                </div>
                <div class="node-actions">
                    <button type="submit" class="btn btn-sm btn-primary" id="node-device-create">Add device</button>
                    <span class="ai-correction-status" id="node-device-status" role="status" aria-live="polite"></span>
                </div>
            </form>

            <div class="node-secret" id="node-secret" data-node-secret hidden>
                <h4>Your device secret</h4>
                <p class="node-notice">This secret is shown once. Copy it now: it cannot be shown again, only replaced with a new one.</p>
                <code class="secret-value" id="node-secret-value" data-node-secret-value></code>
                <div class="node-actions">
                    <button type="button" class="btn btn-sm" id="node-secret-copy">Copy secret</button>
                    <button type="button" class="btn btn-sm" id="node-secret-hide">I have saved it</button>
                </div>
                <div class="node-install" id="node-install" data-node-install>
                    <h4>Install</h4>
                    <div class="node-os" id="node-os" hidden>
                        <div class="node-os-group" id="node-os-group" role="group" aria-label="Operating system"></div>
                        <select class="node-os-select" id="node-os-select" aria-label="Operating system"></select>
                    </div>
                    <pre class="node-install-lines" id="node-install-lines" tabindex="0"></pre>
                    <div class="node-actions">
                        <button type="button" class="btn btn-sm" id="node-install-copy">Copy install lines</button>
                    </div>
                    <p class="node-hint" id="node-install-checksum"></p>
                </div>
            </div>
        </section>

        <section class="node-section" id="node-downloads">
            <h3>Downloads</h3>
            <p class="node-hint">Verify the checksum of anything you download before running it.</p>
            <ul class="node-artifacts" id="node-artifacts" data-node-artifacts>
                <li class="node-hint">Loading downloads.</li>
            </ul>
        </section>
    </div>
</div>