{{ header }}{{ column_left }}
<div id="content" class="content-wrapper">
    <section class="content-header">

  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-module" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
    <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_edit }}</h3>
      </div>
      <div class="panel-body">
        <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-module" class="form-horizontal">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab-general" data-toggle="tab">{{ tab_general }}</a></li>
                <li><a href="#tab-option" data-toggle="tab">{{ tab_option }}</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="tab-general">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                                <div class="col-sm-10">
                                  <select name="module_social_module_status" id="input-status" class="form-control">
                                    {% if module_social_module_status %}
                                    <option value="1" selected="selected">{{ text_enabled }}</option>
                                    <option value="0">{{ text_disabled }}</option>
                                    {% else %}
                                    <option value="1">{{ text_enabled }}</option>
                                    <option value="0" selected="selected">{{ text_disabled }}</option>
                                    {% endif %}
                                  </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-status">{{ entry_position }}</label>
                                <div class="col-sm-10">
                                  <select name="module_social_position" id="input-status" class="form-control">
                                    {% if positions %}
                                        {% for position in positions %}
                                        <option value="{{ position.position }}" {{ (position.position in module_social_position) ? 'selected' : '' }}
                                        >{{ position.value }}</option>
                                        {% endfor %}
                                    {% endif %}
                                  </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-status">{{ entry_style }}</label>
                                <div class="col-sm-10">
                                  <select name="module_social_style" id="input-status" class="form-control">
                                    {% if styles %}
                                        {% for style in styles %}
                                        <option value="{{ style.style }}" {{ (style.style in module_social_style) ? 'selected' : '' }}
                                        >{{ style.value }}</option>
                                        {% endfor %}
                                    {% endif %}
                                  </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-status">{{ entry_target }}</label>
                                <div class="col-sm-10">
                                  <select name="module_social_target" id="input-status" class="form-control">
                                    {% if targets %}
                                        {% for target in targets %}
                                        <option value="{{ target.target }}" {{ (target.target in module_social_target) ? 'selected' : '' }}
                                        >{{ target.value }}</option>
                                        {% endfor %}
                                    {% endif %}
                                  </select>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab-option">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="sortable_container">
                                {% if items %}
                                {% for key,item in items %}
                                    <div class="form-group form_shadow">
                                        <label class="col-sm-2 control-label" for="input-status">{{ item.name }}</label>
                                        <input class="form-control" type="hidden" name="module_social_item[{{ key }}][name]" value="{{ item.name }}">
                                        <div class="col-sm-1">
                                            <div class="tg-list text-center">
                                                <div class="tg-list-item">
                                                    <input type="hidden" name="module_social_item[{{ key }}][status]" value="0" />
                                                    <input class="tgl tgl-flip" name="module_social_item[{{ key }}][status]" id="module_social_item[{{ key }}][status]" type="checkbox" value = "1" {{ (item.status == 1) ? 'checked' : '' }} />
                                                    <label class="tgl-btn" data-tg-off="Off" data-tg-on="On" for="module_social_item[{{ key }}][status]"></label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-8">
                                            <input class="form-control" type="text" name="module_social_item[{{ key }}][link]" value="{{ item.link }}">
                                        </div>
                                        <div class="col-sm-1">
                                            <span class="verticle_middle">&nbsp;</span>
                                            <i class="fa fa-arrows verticle_middle"></i>
                                        </div>
                                    </div>
                                {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
      </div>
    </div>
  </div>
</div>
</section>
<style type="text/css">
  .verticle_middle{
    vertical-align: middle !important;
    display: inline-block !important;
    height: 1px;
  }

  /* ============= button codepen ================= */


  .tg-list {
    text-align: center;
    display: flex;
    align-items: center;
  }

  .tg-list {
      min-height: 36px;
  }

  .tg-list-item {
    margin: 0 auto;
  }

  .tgl {
    display: none;
  }

  .tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
    box-sizing: border-box;
  }
  .tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
    background: none;
  }
  .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
    background: none;
  }

  .tgl + .tgl-btn {
    margin-bottom: 0px;
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
  }
  .tgl + .tgl-btn:after {
    left: 0;
  }
  .tgl + .tgl-btn:before {
    display: none;
  }
  .tgl:checked + .tgl-btn:after {
    left: 50%;
  }

  .tgl-flip + .tgl-btn {
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1));
    padding: 2px;
    transition: all .2s ease;
    font-family: sans-serif;
    -webkit-perspective: 100px;
            perspective: 100px;
  }
  .tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
    display: inline-block;
    transition: all .4s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 2em;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 4px;
  }
  .tgl-flip + .tgl-btn:after {
    content: attr(data-tg-on);
    background: #02C66F;
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
  }
  .tgl-flip + .tgl-btn:before {
    background: #FF3A19;
    content: attr(data-tg-off);
  }
  .tgl-flip + .tgl-btn:active:before {
    -webkit-transform: rotateY(-20deg);
            transform: rotateY(-20deg);
  }
  .tgl-flip:checked + .tgl-btn:before {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  .tgl-flip:checked + .tgl-btn:after {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    left: 0;
    /*background: #7FC6A6;*/
    background: #37ac3b;
  }
  .tgl-flip:checked + .tgl-btn:active:after {
    -webkit-transform: rotateY(20deg);
            transform: rotateY(20deg);
  }

  .form_shadow{
    
  }

  .social_module_container .form-group + .form-group{
    border-top:0px;
  }

  .social_module_container .fa-arrows{
        cursor: move;
  }

  .social_live_preview{
    height: 100%;
    width: 100%;
    min-height: 500px;
    background-color: rgba(200,500,500,0.5);
  }

</style>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
  // $('#sortable_container').sortable({placeholder: "ui-state-highlight",helper:'clone'});
$(function() {
     /* $("#sortable_container").sortable({
        placeholder: 'ui-state-highlight',
        helper:'clone',
        start: function (e,ui){        // new lines to
          $(ui.placeholder).slideUp(); // remove popping
        },                             // effect on start
        change: function (e,ui){
          $(ui.placeholder).hide().slideDown();
        }
      });
    */

    var $sortableList = $("#sortable_container");

    $('#sortable_container > div').each(function(index){
        $(this).find(".input_sort").val(parseInt(index + 1));
    });

    $sortableList.sortable({
        placeholder: 'ui-state-highlight',
        axis: "y",
        revert: 150,
        start: function(e, ui){
            
            placeholderHeight = ui.item.outerHeight();
            ui.placeholder.height(placeholderHeight + 15);
            $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
        
        },
        change: function(event, ui) {
            
            ui.placeholder.stop().height(0).animate({
                height: ui.item.outerHeight() + 15
            }, 300);
            
            placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));
            
            $(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
                height: 0
            }, 300, function() {
                $(this).remove();
                placeholderHeight = ui.item.outerHeight();
                $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
            });
            
        },
        stop: function(e, ui) {
            
            $(".slide-placeholder-animator").remove();

            $('#sortable_container > div').each(function(index){
                $(this).find(".input_sort").val(parseInt(index + 1));
            });
            
        },
    });

    $("#sortable_container").disableSelection();

});
</script>
{{ footer }}