{% extends '../layout/admin.html' %}

{% block html_title %}カスタマイズ · {% endblock %}

{% block html_additional_headers %}
  <!-- CodeMirror -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/g/codemirror@4.5.0(codemirror.css+addon/hint/show-hint.css)">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/codemirror/4.5.0/theme/eclipse.css">
  <style>
    .CodeMirror {
      border: 1px solid #eee;
    }
  </style>
{% endblock %}


{% block content_head %}
<div class="header-wrap">
  <header id="page-header">
    <h1 class="title" id="">カスタマイズ</h1>
  </header>
</div>
{% endblock %}

{% block content_main %}
<div class="content-main admin-customize">
  {% set smessage = req.flash('successMessage') %}
  {% if smessage.length %}
  <div class="alert alert-success">
    {{ smessage }}
  </div>
  {% endif %}

  {% set emessage = req.flash('errorMessage') %}
  {% if emessage.length %}
  <div class="alert alert-danger">
    {{ emessage }}
  </div>
  {% endif %}

  <div class="row">
    <div class="col-md-3">
      {% include './widget/menu.html' with {current: 'customize'} %}
    </div>
    <div class="col-md-9">

      <form action="/_api/admin/customize/behavior" method="post" class="form-horizontal" id="cutombehaviorSettingForm" role="form">
      <fieldset>
        <legend>挙動</legend>

        <div class="form-group">
          <div class="col-xs-6">
            <h4>
              <input type="radio" name="settingForm[customize:behavior]" value="crowi"
                  {% if !settingForm['customize:behavior'] || 'crowi' === settingForm['customize:behavior'] %}checked="checked"{% endif %}>
              Official Crowi Behavior
            </h4>
            <ul>
              <li><code>/page</code> shows the page</li>
              <li><code>/page/</code> shows the list of sub pages</li>
              <ul>
                <li>If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown</li>
              </ul>
              <li><code>/nonexistent_page</code> shows editing form</li>
              <li><code>/nonexistent_page/</code> the list of sub pages</li>
            </ul>
          </div>
          <div class="col-xs-6">
            <h4>
              <input type="radio" name="settingForm[customize:behavior]" value="crowi-plus"
                  {% if 'crowi-plus' === settingForm['customize:behavior'] %}checked="checked"{% endif %}>
              crowi-plus Simplified Behavior <small class="text-success">(Recommended)</small>
            </h4>
            <ul>
              <li><code>/page</code> and <code>/page/</code> both shows the page</li>
              <li><code>/nonexistent_page</code> shows editing form</li>
              <li>All pages shows the list of sub pages</li>
            </ul>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-5 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>

      </fieldset>
      </form>


      <form action="/_api/admin/customize/layout" method="post" class="form-horizontal" id="cutomlayoutSettingForm" role="form">
      <fieldset>
        <legend>レイアウト</legend>

        <div class="form-group">
          <div class="col-xs-6">
            <h4>
              <input type="radio" name="settingForm[customize:layout]" value="crowi"
                  {% if !settingForm['customize:layout'] || 'crowi' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
              Official Crowi Classic Layout
            </h4>
            <a href="/images/admin/customize/layout-classic.gif" class="ss-container">
              <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px">
            </a>
            <ul>
              <li>Functional</li>
              <ul>
                <li>Collapsible Sidebar</li>
                <li>Show and post comments in Sidebar</li>
                <li>Collapsible Table-of-contents</li>
              </ul>
            </ul>
          </div>
          <div class="col-xs-6">
            <h4>
              <input type="radio" name="settingForm[customize:layout]" value="crowi-plus"
                  {% if 'crowi-plus' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
              crowi-plus Enhanced Layout <small class="text-success">(Recommended)</small>
            </h4>
            <a href="/images/admin/customize/layout-crowi-plus.gif" class="ss-container">
              <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px">
            </a>
            <ul>
              <li>Simple and Clear</li>
              <ul>
                <li>Show and post comments from the bottom of the page</li>
                <li>Affix Table-of-contents</li>
              </ul>
            </ul>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-5 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>

      </fieldset>
      </form>


      <form action="/_api/admin/customize/features" method="post" class="form-horizontal" id="customfeaturesSettingForm" role="form">
      <fieldset>
      <legend>機能</legend>
        <p class="well">機能の有効/無効を選択できます。</p>

        <div class="form-group">
          <label for="settingForm[customize:isEnabledTimeline]" class="col-xs-3 control-label">タイムライン表示機能</label>
          <div class="col-xs-9">
            <div class="btn-group btn-toggle" data-toggle="buttons">
              <label class="btn {% if settingForm['customize:isEnabledTimeline'] %}btn-primary active{% else %}btn-default{% endif %}">
                <input name="settingForm[customize:isEnabledTimeline]" value="true" type="radio"
                    {% if true === settingForm['customize:isEnabledTimeline'] %}checked{% endif %}> 有効
              </label>
              <label class="btn {% if !settingForm['customize:isEnabledTimeline'] %}btn-primary active{% else %}btn-default{% endif %}">
                <input name="settingForm[customize:isEnabledTimeline]" value="false" type="radio"
                    {% if !settingForm['customize:isEnabledTimeline'] %}checked{% endif %}> 無効
              </label>
            </div>

            <p class="help-block">
              無効化することで、リストページの表示を高速化できます。<br>
              配下ページが多い場合に効果があります。
            </p>
          </div>

        </div>

        <div class="form-group">
          <div class="col-xs-offset-3 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>

      </fieldset>
      </form>


      <form action="/_api/admin/customize/css" method="post" class="form-horizontal" id="cutomcssSettingForm" role="form">
      <fieldset>
        <legend>カスタムCSS</legend>

        <p class="help-block">
          システム全体に適用されるCSSを記述できます。<br>
          変更の反映はページの更新が必要です。
        </p>

        <div class="form-group">
          <div class="col-xs-12">
            <textarea id="taCustomCss" class="form-control" type="textarea" name="settingForm[customize:css]" rows="20">{{ settingForm['customize:css'] }}</textarea>
          </div>
          <div class="col-xs-12">
            <p class="help-block text-right">
              <i class="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
              Ctrl+Space でコード補完
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-xs-offset-5 col-xs-6">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">更新</button>
          </div>
        </div>

      </fieldset>
      </form>

    </div>
  </div>

  <script>
    $('#cutomcssSettingForm, #cutomlayoutSettingForm, #cutombehaviorSettingForm, #customfeaturesSettingForm').each(function() {
      $(this).submit(function()
      {
        function showMessage(formId, msg, status) {
          $('#' + formId + ' .alert').remove();

          if (!status) {
            status = 'success';
          }
          var $message = $('<p class="alert"></p>');
          $message.addClass('alert-' + status);
          $message.html(msg.replace('\n', '<br>'));
          $message.insertAfter('#' + formId + ' legend');

          if (status == 'success') {
            setTimeout(function()
            {
              $message.fadeOut({
                complete: function() {
                  $message.remove();
                }
              });
            }, 5000);
          }
        }

        var $form = $(this);
        var $id = $form.attr('id');
        var $button = $('button', this);
        $button.attr('disabled', 'disabled');
        var jqxhr = $.post($form.attr('action'), $form.serialize(), function(data)
          {
            if (data.status) {
              showMessage($id, '更新しました');
            } else {
              showMessage($id, data.message, 'danger');
            }
          })
          .fail(function() {
            showMessage($id, 'エラーが発生しました', 'danger');
          })
          .always(function() {
            $button.prop('disabled', false);
        });
        return false;
      });
    });

  </script>

  <!-- CodeMirror -->
  <script src="https://cdn.jsdelivr.net/g/codemirror@4.5.0(codemirror.min.js+addon/lint/css-lint.js+mode/css/css.js+addon/hint/css-hint.js+addon/hint/show-hint.js+addon/edit/matchbrackets.js+addon/edit/closebrackets.js),jquery.ui@1.11.4"></script>
  <script>
    var editor = CodeMirror.fromTextArea(document.getElementById('taCustomCss'), {
      mode: "css",
      lineNumbers: true,
      tabSize: 2,
      indentUnit: 2,
      theme: 'eclipse',
      matchBrackets: true,
      autoCloseBrackets: true,
      extraKeys: {"Ctrl-Space": "autocomplete"},
    });
    editor.on('change', function(cm, change) {
      cm.save();
    });
    // resizable with jquery.ui
    $(editor.getWrapperElement()).resizable({
      resize: function() {
        editor.setSize($(this).width(), $(this).height());
      }
    });

    // Bootstrap 3 Toggle Switch Snippet
    // http://www.bootply.com/92189
    $('.btn-toggle').click(function() {
      $(this).find('.btn').toggleClass('active');

      if ($(this).find('.btn-primary').length>0) {
        $(this).find('.btn').toggleClass('btn-primary');
      }
      if ($(this).find('.btn-danger').length>0) {
        $(this).find('.btn').toggleClass('btn-danger');
      }
      if ($(this).find('.btn-success').length>0) {
        $(this).find('.btn').toggleClass('btn-success');
      }
      if ($(this).find('.btn-info').length>0) {
        $(this).find('.btn').toggleClass('btn-info');
      }

      $(this).find('.btn').toggleClass('btn-default');
    });
  </script>

</div>
{% endblock content_main %}

{% block content_footer %}
{% endblock content_footer %}