{% extends "base.html" %}
{% block title %}Settings — BashyOverlay{% endblock %}
{% block content %}
<hgroup>
    <h1>Settings</h1>
</hgroup>

{% if saved %}
<div class="notice-success">Settings saved.</div>
{% endif %}

<section>
    <h2>OBS browser source URL</h2>
    <p>Add this as a browser source in OBS:</p>
    <input type="text" value="{{ overlay_url }}" readonly onclick="this.select()" class="url-input">
    <small>Refresh the browser source in OBS after changing settings.</small>
</section>

<section>
    <form method="post" action="/settings">
        <h2>Channel</h2>
        <label>
            Twitch channel name
            <input type="text" name="twitch_channel" value="{{ settings.twitch_channel }}" required placeholder="your_channel">
        </label>

        <h2>Gap audio thresholds</h2>
        <p><small>A tone plays when a new message arrives after a silence. These control how the volume and pitch scale with the gap length.</small></p>
        <div class="form-grid">
            <label>
                Silence threshold (seconds)
                <input type="number" name="gap_silence_threshold" value="{{ settings.gap_silence_threshold }}" min="0">
                <small>No sound if gap is shorter than this.</small>
            </label>
            <label>
                Full volume at (seconds)
                <input type="number" name="gap_scale_end" value="{{ settings.gap_scale_end }}" min="1">
                <small>Volume reaches 100% at this gap length.</small>
            </label>
            <label>
                Max pitch at (seconds)
                <input type="number" name="gap_pitch_scale_end" value="{{ settings.gap_pitch_scale_end }}" min="1">
                <small>Pitch stops scaling up after this gap length.</small>
            </label>
        </div>

        <h2>Custom CSS</h2>
        <p><small>Injected into the overlay after the default styles. Overrides anything. Use <code>#chat</code>, <code>.chat-msg</code>, <code>#alert</code>.</small></p>
        <textarea name="custom_css" class="code-textarea" rows="10" placeholder="/* example */&#10;#alert { border: 2px solid #9146ff; box-shadow: 0 0 20px #9146ff; }&#10;.chat-msg { border-left: 3px solid; }">{{ settings.custom_css }}</textarea>

        <h2>Custom JS</h2>
        <p><small>Injected after the overlay scripts. Hook into events with <code>document.addEventListener('bashyoverlay:sub', e => ...)</code>. Available events: <code>sub</code>, <code>gift_sub</code>, <code>bits</code>, <code>channel_points</code>, <code>command</code>, <code>follow</code>, <code>raid</code>.</small></p>
        <textarea name="custom_js" class="code-textarea" rows="10" placeholder="// example&#10;document.addEventListener('bashyoverlay:raid', e => {&#10;  console.log('Raid from', e.detail.alert_text);&#10;});">{{ settings.custom_js }}</textarea>

        <button type="submit">Save settings</button>
    </form>
</section>

<section>
    <h2>EventSub</h2>
    <form method="post" action="/settings/reconnect">
        <button type="submit" class="outline">Reconnect EventSub</button>
    </form>
</section>
{% endblock %}