<% layout('../layouts/main') -%>

<% block('custom_style', `
<style>
  textarea {
    resize: none;
  }
  em{
    color: red
  }
</style>
`) %>

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Inclusions-Exclusions
    <!--<small>Preview</small>-->
  </h1>
  <ol class="breadcrumb">
    <li><a href="/dashboard"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="/benefit">Inclusions-Exclusions</a></li>
    <li class="active">Add Inclusions-Exclusions</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <div class="box box-primary">
    <form role="form" class="has-validation-callback" method="POST">
      <div class="box-header with-border">
        <!-- <h3 class="box-title">Benefit Slug</h3><em>*</em> -->
        <input type="hidden" value="abc" class="form-control" id="slug" name="slug" required>

        <!--<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="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++) {
                          if(i == 0) {%>
                <div class="tab-pane active" id="<%= language[i].name %>">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group ">
                        <label>Inclusions-Exclusions</label>
                        <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
                        <input name="<%= language[i].lang+'_name'%>" value="<%= flash.data_name || '' %>" id="name"
                          class="form-control" placeholder="Inclusions-Exclusions" data-validation="required" type="text" required>
                        <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                        <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_name')) { %>
                        <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                          <%= flash.errors_name %>
                        </h5>
                        <% } %>
                      </div>
                    </div>
                  </div>
                </div>
                <% } else { %>
                <div class="tab-pane" id="<%= language[i].name %>">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group ">
                        <label>Inclusions-Exclusions</label>
                        <!--<input type="password" class="form-control" id="exampleInputPassword1" placeholder="New Password">-->
                        <input name="<%= language[i].lang+'_name'%>" value="<%= flash.data_name || '' %>" id="name"
                          class="form-control" placeholder="Inclusions-Exclusions" data-validation="required" type="text" required>
                        <!--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                        <% if (Object.prototype.hasOwnProperty.call(flash, 'errors_name')) { %>
                        <h5 class="text-danger"><i class="fa fa-exclamation-triangle"></i>
                          <%= flash.errors_name %>
                        </h5>
                        <% } %>
                      </div>
                    </div>
                  </div>
                </div>
                <% } } %>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label>Category</label>
            <select id="category" class="form-control select2" name="category" 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>
      <!-- /.row -->
      <div class="box-footer">
        <div class="pull-left">
          <p class="text-success">
          </p>
        </div>
        <div class="pull-right">
          <input 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 -->