<% layout('../layouts/main') -%>

<!-- Select2 -->
<% stylesheet('/css/select2.min.css') %>

<!-- Select2 -->
<% script('/js/select2.full.min.js') %>
<% script('https://cdn.ckeditor.com/4.11.1/full-all/ckeditor.js') %>

<% block('custom_scripts', `
<script>
  $(function () {
      //Initialize Select2 Elements
      $('.select2').select2()

    //   CKEDITOR.replace('content');
      CKEDITOR.replaceClass = 'ckeditor';
  })
</script>
`) %>

<% block('custom_style', `
<style type="text/css">
  .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #2a83a7;
    border: 1px solid #2a83a7;
  }
</style>
`) %>

<section class="content-header">
  <h1>
    Add New CMS
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="<%= '/cms' %>">CMS</a></li>
    <li class="active">Add New</li>
  </ol>
</section>

<section class="content">
  <div class="box box-primary">
    <form role="form" class="has-validation-callback" method="POST">
      <div class="box-header with-border">

      </div>



      <div class="box-body">
        <div class="row">
          <div class="col-md-12">
            <div class="nav-tabs-custom">
              <ul class="nav nav-tabs">
                <% for (var i=0; i<language.length; i++) {
                          if(i == 0) {%>
                <li class="active"><a href="<%= '#'+language[i].name %>" data-toggle="tab"><%= language[i].name %></a>
                </li>
                <% } else { %>
                <li><a href="<%= '#'+language[i].name %>" data-toggle="tab"><%= language[i].name %></a>
                </li>
                <% } } %>
                <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a>
                </li>
              </ul>
              <div class="tab-content">
                <% for (var i=0; i<language.length; i++) { %>
                <div class="tab-pane <%= i==0 ? 'active': '' %>" id="<%= language[i].name %>">
                  <div class="box-body">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group col-md-12">
                          <label>Title (<%= language[i].lang %>)</label>
                          <input name="<%= 'title_' + language[i].lang %>" id="title" class="form-control" value="" />
                          <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_title_'+language[i].lang)) { %>
                            <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                              <%= flash['errors_title_'+language[i].lang]%>
                            </h5>
                            <% } %>
                          </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group col-md-12">
                          <label>Content (<%= language[i].lang %>)</label>
                          <textarea class="ckeditor" name="<%= 'content_' + language[i].lang %>" id="content"
                            class="form-control" rows="8"></textarea>
                            <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_content_'+language[i].lang)) { %>
                              <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                                <%= flash['errors_content_'+language[i].lang]%>
                              </h5>
                              <% } %>
                        </div>
                      </div>
                    </div>
                  </div>


                </div>


                <% } %>
                <div class="col-md-6">
                  <div class="form-group col-md-6">
                    <label>Position </label>
                    <input name="position" id="position" class="form-control" type="number" value="" />
                    <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_position')) { %>
                      <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                        <%= flash['errors_position']%>
                      </h5>
                      <% } %>
                  </div>
                </div><div class="col-md-6">
                    <div class="form-group col-md-6">
                      <label>Slug </label>
                      <input name="slug" id="slug" class="form-control" value="" />
                      <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_slug')) { %>
                        <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                          <%= flash['errors_slug']%>
                        </h5>
                        <% } %>
                    </div>
                  </div>


                </div>

                <div class="box-footer">
                  <div class="pull-left">
                    <p class="text-success">
                    </p>
                  </div>
                  <div class="pull-right">
                    <a href="/extra" class="btn btn-primary" role="button">Cancel</a>
                    <input value="Submit" class="btn btn-primary" type="submit">
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>


    </form>
  </div>
</section>