{% extends 'layout.html' %}

{% block body %}
<script src="/js/jquery.tagsinput.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="/css/jquery.tagsinput.css">

<div class="container">
  <div class="panel panel-novo">
    <div class="panel-body">
      {% if messages.error %}
      <div role="alert" class="alert alert-danger">
        {% for error in messages.error %}
        <div>{{ error.msg }}</div>
        {% endfor %}
      </div>
      {% endif %}
      <form action="" class="form-horizontal">
        <legend> Nova produção </legend>
        <div class="form-group">
          <label class="col-sm-3" for="name">Título da Produção</label>
          <div class="col-sm-7">
            <input type="text" name="title" class="form-control" autofocus value="" placeholder="O Menino da Internet">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3">Subtítulo da Produção</label>
          <div class="col-sm-7">
            <input type="text" name="subtitle" class="form-control" autofocus value="" placeholder="A História de Aaron Swartz">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3">Ano da Produção</label>
          <div class="col-sm-2">
            <input type="text" name="year" class="form-control" autofocus value="" placeholder="2014">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3">Duração</label>
          <div class="col-sm-2">
            <input type="text" name="duration" class="form-control" autofocus value="" placeholder="1h 45m">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3">Classificação Indicativa</label>
          <div class="col-sm-7">
            <label class="radio-inline radio">
              <input type="radio" name="classind" value="l"><span>Livre</span>
            </label>
            <label class="radio-inline radio">
              <input type="radio" name="classind" value="10"><span>10</span>
            </label>
            <label class="radio-inline radio">
              <input type="radio" name="classind" value="12"><span>12</span>
            </label>
            <label class="radio-inline radio">
              <input type="radio" name="classind" value="14"><span>14</span>
            </label>
            <label class="radio-inline radio">
              <input type="radio" name="classind" value="16"><span>16</span>
            </label>
            <label class="radio-inline radio">
              <input type="radio" name="classind" value="18"><span>18</span>
            </label>
        </div>
      </div>
        <div class="form-group">
          <label class="col-sm-3">Descrição</label>
          <div class="col-sm-7">
            <textarea class="form-control" rows="10" name="sinopse" id="textarea"></textarea>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3">Url do Vídeo</label>
          <div class="col-sm-5">
            <input type="text" name="video" class="form-control" autofocus value="" placeholder="y8fxto7ua">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3">Permalink</label>
          <div class="col-sm-5">
            <input type="text" name="permalink" class="form-control" autofocus value="" placeholder="o-menino-da-internet">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3">Tags</label>
          <div class="col-sm-7">
            <input type="text" name="tags" class="form-control" autofocus value="" placeholder="docs, tech, biografia">
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3">Imagem de Background</label>
            <div class="col-sm-7">
              <input id="upload-input" type="file" accept="image/jpg, image/jpeg">
              <img1></img1>
            </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3">Imagem para Thumbnail</label>
          <div class="col-sm-7">
            <input id="upload-input2" type="file" accept="image/jpg, image/jpeg">
            <img2></img2>
          </div>
          <small>480x270</small>
        </div>
        <!-- Fim -->
        <div class="form-group">
          <!-- <small class="text-muted">Criando uma conta, você concorda com os <a href="/" target="_blank">Termos de Uso</a>.</small> -->
        </div>
        <div class="col-sm-3"></div>
        <div class="col-sm-7">
          <button type="submit" class="btn btn-success" formmethod="post">Salvar Produção</button>
          <a href="/"><button class="btn btn-danger" type="button">Cancelar</button></a>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="/js/bootstrap-select.js"></script>
<script src="js/upload.js"></script>
{% endblock %}
