<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>

<% block('custom_scripts', `
<script>
  $(function () {
      //Initialize Select2 Elements
      $('.select2').select2();
  })

  function goBack() {
    window.history.back();
  }
</script>
`) %>

<% block('custom_style', `
<style>
  textarea {
    resize: none;
  }
  em{
    color: red
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #2a83a7;
    border: 1px solid #2a83a7;
  }
</style>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    FAQ
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/faq">FAQ</a></li>
    <li class="active">Add FAQ</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">

  <% if (Object.prototype.hasOwnProperty.call(flash, 'success')) { %>
    <div class="alert alert-success alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      <%= flash.success %>
    </div>
    <% } %>
    <% if (Object.prototype.hasOwnProperty.call(flash, 'error')) { %>
    <div class="alert alert-danger alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      <%= flash.error %>
    </div>
    <% } %>
  <div class="box box-primary">
    <form role="form" class="has-validation-callback" method="POST">
      <div class="box-header with-border">
        <h3 class="box-title">New FAQ</h3>

        <!--<div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
        </div>-->
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <div class="row">
          <!-- <div class="form-group col-md-6">
            <label>Language</label>
            <select id="languages" class="form-control select2" name="language" required>
              <% for(lidx in languages) { %>
              <option value="<%= languages[lidx]._id %>">
                <%= languages[lidx].name %>
              </option>
              <%}%>
            </select>
            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_language')) { %>
            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
              <%= flash.errors_language %>
            </h5>
            <% } %>
          </div> -->
          <div class="form-group col-md-6">
            <label>Category</label>
            <select id="category" class="form-control select2" name="category" multiple="multiple" required>
              <% for(cidx in categories) { %>
              <option value="<%= categories[cidx].key %>">
                <%= categories[cidx].value %>
              </option>
              <%}%>
            </select>
            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_category')) { %>
            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
              <%= flash.errors_category %>
            </h5>
            <% } %>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            English
            <label>Question</label>

            <textarea name="question" class="form-control" placeholder="" rows="2" required><%= flash.data_question || '' %></textarea>
            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_question')) { %>
            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
              <%= flash.errors_question %>
            </h5>
            <% } %>
          </div>

          <div class="form-group col-md-6">
            Portugese
            <label>Question</label>
            <textarea name="question_pt" class="form-control" placeholder="" rows="2" required><%= flash.data_question || '' %></textarea>
            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_question')) { %>
            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
              <%= flash.errors_question %>
            </h5>
            <% } %>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label>Answer</label>
            <textarea name="answer" class="form-control" placeholder="" rows="3" required><%= flash.data_answer || '' %></textarea>
            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_answer')) { %>
            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
              <%= flash.errors_answer %>
            </h5>
            <% } %>
          </div>

          <div class="form-group col-md-6">
            <label>Answer</label>
            <textarea name="answer_pt" class="form-control" placeholder="" rows="3" required><%= flash.data_answer || '' %></textarea>
            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_answer')) { %>
            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
              <%= flash.errors_answer %>
            </h5>
            <% } %>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
              <div class="form-group">
                  <label for="width">Ranking position </label><em>*</em>
                  <select name="rank" id="rank" class="form-control required">
                      <option value="">Select Ranking</option>
                      <%
                      for(var i=1; i<=12; i++){
                        %>
                      <option value="<%= i %>"><%= i %></option>
                        <%
                      } 
                      %>
                  </select>
                  <h5 class="text-danger" id="ranking_error"></h5>
              </div>
          </div>
      </div>
      </div>
      <!-- /.row -->
      <div class="box-footer">
        <div class="pull-left">
          <p class="text-success">
          </p>
        </div>
        <div class="pull-right">
          <a href="/faq" class="btn btn-primary" role="button">Cancel</a>
          <input name="submit" value="Submit" class="btn btn-primary" type="submit">
        </div>
      </div>
      <!--<div class="box-footer">
          Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about
          the plugin.
      </div>-->
    </form>
  </div>
  <!-- /.box -->
</section>
<!-- /.content -->