{% load i18n %}

<form v-cloak v-if="state.show" @submit.prevent="submit()">
  <div class="panel panel-warning">
    <div class="panel-heading">
      Silence
      <a @click="state.show = false" type="button" class="close">&times;</a>
    </div>

    <div class="labels panel-body">
      <ul class="list-inline">
        <li v-for="(value, label) in state.labels">
          <a @click="removeLabel(label)" class="label label-warning">
            [[label]]: [[value]]
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          </a>
        </li>
      </ul>
    </div>

    <table class="table table-bordered table-condensed">
      <tr>
        <th>Duration</th>
        <th>Starts</th>
        <th>Ends</th>
        <th>Comment</th>
        <th>Created by</th>
      </tr>
      <tr>
        <td><input v-model="form.duration" placeholder="1m/1h/etc" class="form-control" /></td>
        <td><input v-model="form.startsAt" placeholder="2006-10-25 14:30" type='datetime-local' class="form-control" /></td>
        <td><input v-model="form.endsAt" placeholder="2006-10-25 14:30" type='datetime-local' class="form-control" /></td>
        <td><input v-model="form.comment" placeholder="Silenced from Promgen" class="form-control" /></td>
        <td><input v-model="form.createdBy" placeholder="Promgen" class="form-control" /></td>
      </tr>
    </table>

    <div class="panel-footer">
      <button class="btn btn-warning">{% trans "Silence" %}</button>
    </div>
  </div>
</form>
