{% extends "base.html" %}
{% block content %}
<h1>Navidrome</h1>
<form method="post">
  <div class="card">
    <div class="section-label">Connection</div>
    <div class="field">
      <label for="url">Server URL</label>
      <input type="text" id="url" name="url" value="{{ settings.url or '' }}" placeholder="https://music.example.com">
    </div>
    <div class="field">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" value="{{ settings.username or '' }}">
    </div>
    <div class="field">
      <label for="password">Password</label>
      <input type="password" id="password" name="password" value="{{ settings.password or '' }}">
    </div>
    <div class="field">
      <label for="filter_user">Only show this listener (optional)</label>
      <input type="text" id="filter_user" name="filter_user" value="{{ settings.filter_user or '' }}">
      <p class="hint">Leave empty to show whoever is playing.</p>
    </div>
  </div>

  <div class="card">
    <div class="section-label">Display options</div>
    <label class="checkbox"><input type="checkbox" name="show_progress" {{ "checked" if settings.show_progress }}> Progress bar (decorative -- shows length, not live position, so it won't force extra refreshes)</label>
    <label class="checkbox"><input type="checkbox" name="show_genre" {{ "checked" if settings.show_genre }}> Genre</label>
    <label class="checkbox"><input type="checkbox" name="show_source" {{ "checked" if settings.show_source }}> Player and listener name</label>
  </div>

  <div class="card">
    <div class="section-label">Cover art</div>
    <label class="checkbox"><input type="checkbox" name="boost_cover" {{ "checked" if settings.boost_cover }}> Boost contrast for e-ink</label>
    <label class="checkbox"><input type="checkbox" name="grayscale_cover" {{ "checked" if settings.grayscale_cover }}> Force grayscale</label>
  </div>

  <button type="submit">Save</button>
</form>
{% endblock %}