{% extends "AppBundle::layout.html.twig" %}
{% block body%}
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-offset-1 col-md-10">
        <div class="card">
          <div class="card-header card-header-icon" data-background-color="rose">
            <i class="material-icons">video_library</i>
          </div>
          <div class="card-content">
            <h4 class="card-title">New Video</h4>
            {{form_start(form)}}
               <div class="form-group label-floating ">
                  <label class="control-label">Video title</label>
                  {{form_widget(form.title,{"attr":{"class":"form-control"}})}}
                  <span class="validate-input">{{form_errors(form.title)}}</span>
              </div>
              <div class="form-group label-floating ">
                  <label class="control-label">Video description</label>
                  {{form_widget(form.description,{"attr":{"class":"form-control"}})}}
                  <span class="validate-input">{{form_errors(form.description)}}</span>
              </div>
              <div class="form-group label-floating ">
                  <label class="control-label">Video url</label>
                  {{form_widget(form.urlvideo,{"attr":{"class":"form-control"}})}}
                  <span class="validate-input">{{form_errors(form.urlvideo)}}</span>
              </div>
               <img src="{{asset("img/image_placeholder.jpg")}}" class="fileinput-preview thumbnail " id="img-preview">
                <div class="fileinput fileinput-new text-center" data-provides="fileinput" style="width: 100%;">
                    <div>
                        <a href="#" class="btn btn-rose btn-round btn-select" style="width: 100%;margin:0px;"><i class="material-icons">image</i> Select Image</a>
                    </div>
                    {{form_widget(form.file,{"attr":{"class":"file-hidden input-file img-selector","style":"   /* display: none; */height: 0px;width: 0px;position: absolute;"}})}}
                    <span class="validate-input">{{form_errors(form.file)}}</span>
               </div>
               
              <div class="">
                    <label>
                      {{form_widget(form.enabled)}}  Enabled
                    </label>
              </div>
              <div class="">
                    <label>
                      {{form_widget(form.comment)}}  Enabled Comment
                    </label>
              </div>
              <br>
              {{form_label(form.categories,null,{label_attr:{"style":"font-size:16px"}})}} :
              <div>
                  <div class="row">
                 {% for field in form.categories %}
                      <label  style="background: #e02d6c;border-radius: 20px;padding: 5px;text-align: center;margin: 10px;color: white;font-weight: bold;padding-left: 20px;padding-right: 20px;">
                          {{ form_widget(field) }} {{ field.vars.label }}
                      </label>
                  {% endfor %}
                  </div>
              </div>
              <br>
              {{form_label(form.languages,null,{label_attr:{"style":"font-size:16px"}})}} :
              <div>
                  <div class="row">
                 {% for field in form.languages %}
                      <label  style="background: #e02d6c;border-radius: 20px;padding: 5px;text-align: center;margin: 10px;color: white;font-weight: bold;padding-left: 20px;padding-right: 20px;">
                          {{ form_widget(field) }} {{ field.vars.label }}
                      </label>
                  {% endfor %}
                  </div>
              </div>
                <div class="form-group label-floating ">
                    <label class="control-label">ringtone tags (Ex:anim,art,hero)</label>
                    <br>
                    {{form_widget(form.tags,{"attr":{"class":"input-tags"}})}}
                    <span class="validate-input">{{form_errors(form.tags)}}</span>
                </div>
                <script>
                $('.input-tags').selectize({
                  persist: false,
                  createOnBlur: true,
                  create: true
                });
                </script>
              <br>
              <span class="pull-right"><a href="{{path("app_video_index")}}" class="btn btn-fill btn-yellow"><i class="material-icons">arrow_back</i> Cancel</a>{{form_widget(form.save,{attr:{"class":"btn btn-fill btn-rose"}})}}</span>
            {{form_end(form)}}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock%}