{% extends "base_detail.html" %}

{% block title %}Scrobble Visibility Settings{% endblock %}

{% block head_extra %}
<style>
.vis-form {
    max-width: 700px;
}
.vis-form h3 {
    margin-top: 24px;
    margin-bottom: 12px;
}
.vis-form h4 {
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 1.1rem;
}
.vis-form label {
    font-weight: 600;
    margin-right: 12px;
}
.vis-form .bulk-radio-group {
    margin: 8px 0 16px 0;
}
.vis-form .bulk-radio-group label {
    font-weight: normal;
    display: block;
    margin: 4px 0;
}
.vis-form .media-type-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0;
    padding: 4px 8px;
    border-radius: 4px;
}
.vis-form .media-type-row:nth-child(even) {
    background: #f8f9fa;
}
.vis-form .media-type-row label {
    font-weight: normal;
    min-width: 130px;
}
.vis-form select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.vis-form input[type="submit"] {
    margin-top: 20px;
    padding: 10px 24px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.vis-form input[type="submit"]:hover {
    background: #0056b3;
}
.vis-stats {
    margin: 16px 0;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
}
.vis-stats strong {
    display: block;
    margin-bottom: 6px;
}
.vis-stats ul {
    margin: 0;
    padding-left: 18px;
}
</style>
{% endblock %}

{% block details %}
<p><a href="{% url 'profiles:profile_settings' %}">&laquo; Back to settings</a></p>

<div class="vis-stats">
    <strong>Current scrobble visibility ({{ scrobble_count }} total)</strong>
    <ul>
        {% for item in visibility_counts %}
        <li><a href="{% url 'scrobbles:scrobble-list' %}?visibility={{ item.visibility }}">{{ item.visibility|title }}</a>: {{ item.count }}</li>
        {% endfor %}
    </ul>
</div>

<form method="post" class="vis-form">{% csrf_token %}
    <h3>Bulk Update</h3>
    <p>Choose a visibility to apply to all scrobbles that are <strong>not</strong> currently "Shared".</p>
    <div class="bulk-radio-group">
        {% for radio in form.bulk_action %}
        <label>{{ radio.tag }} {{ radio.choice_label }}</label>
        {% endfor %}
    </div>

    <details>
        <summary><h3 style="display:inline">Per-Media-Type Defaults</h3></summary>
        <p>Override default visibility for new scrobbles of specific types.</p>
        {% for field in form %}
            {% if field.name != "bulk_action" %}
            <div class="media-type-row">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
            </div>
            {% endif %}
        {% endfor %}
    </details>

    <input type="submit" value="Save Visibility Settings">
</form>
{% endblock %}