{{define "radio"}}{{template "header" .}}
{{if and .User .User.IsAdmin}}
<div class="card mb-4" style="max-width: 600px;">
  <div class="card-body">
    <h2 class="h6">Add station</h2>
    <form method="post" action="/radio">
      {{template "csrf_field" .CSRFToken}}
      <div class="row g-2">
        <div class="col-4"><input type="text" name="name" class="form-control form-control-sm" placeholder="Name" required></div>
        <div class="col-4"><input type="text" name="stream_url" class="form-control form-control-sm" placeholder="Stream URL" required></div>
        <div class="col-4"><input type="text" name="homepage_url" class="form-control form-control-sm" placeholder="Homepage (optional)"></div>
      </div>
      <button type="submit" class="btn btn-primary btn-sm mt-2">Add station</button>
    </form>
  </div>
</div>
{{end}}

{{if .Data}}
<div class="list-group">
  {{range .Data}}
  <div class="list-group-item d-flex justify-content-between align-items-center">
    <div>
      <div class="fw-semibold">{{.Name}}</div>
      <div class="text-secondary small">{{.StreamURL}}</div>
    </div>
    <div>
      <a class="btn btn-sm btn-outline-primary" href="{{.StreamURL}}"><i class="bi bi-play-fill"></i> Play</a>
      {{if and $.User $.User.IsAdmin}}
      <form method="post" action="/radio/{{.ID}}/delete" class="d-inline">
        {{template "csrf_field" $.CSRFToken}}
        <button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
      </form>
      {{end}}
    </div>
  </div>
  {{end}}
</div>
{{else}}
<p class="text-secondary">No internet radio stations yet.</p>
{{end}}
{{template "footer" .}}{{end}}