{% extends "admin/base_site.html" %}
{% load i18n %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
  &rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
  &rsaquo; <a href="{{ changelist_url }}">{{ opts.verbose_name_plural|capfirst }}</a>
  &rsaquo; {% trans "Take Sample" %}
</div>
{% endblock %}

{% block content %}
<h1>{% trans "Take Sample" %}</h1>
<p>{% trans "Record a short audio sample from the default microphone or choose another device." %}</p>

{% if default_device %}
  <p><strong>{% trans "Default device:" %}</strong> {{ default_device }}</p>
{% endif %}

<form method="post">
  {% csrf_token %}
  <fieldset class="module aligned">
    <div class="form-row">
      {{ form.device.errors }}
      <label for="{{ form.device.id_for_label }}">{{ form.device.label }}</label>
      {{ form.device }}
    </div>
  </fieldset>
  <div class="submit-row">
    <button type="submit" class="default">{% trans "Take Sample" %}</button>
    <a href="{{ changelist_url }}" class="button">{% trans "Back to list" %}</a>
  </div>
</form>

{% if sample_audio %}
  <h2>{% trans "Latest sample" %}</h2>
  <audio controls style="width:100%;" src="{{ sample_audio }}"></audio>
  {% if sample_url %}
    <p><a href="{{ sample_url }}">{% trans "View sample details" %}</a></p>
  {% endif %}
{% endif %}
{% endblock %}