{% extends _cms.conf.adminTemplate %}

{% block title %}Save Document{% endblock %}

{% block head %}
<link rel="stylesheet" href="/plugin/cms/codemirror/codemirror.min.css" />
<script src="/plugin/cms/codemirror/codemirror.min.js"></script>
{%if cmMode%}
<script src="//cdn.jsdelivr.net/npm/codemirror@5.51.0/mode/{{cmMode}}/{{cmMode}}.js"></script>
{%endif%}

<style>
.label {
  width: 80px;
  display: inline-block;

}

.CodeMirror {
  border: 1px solid #ccc;
  padding: 3px;
}
</style>
{% endblock %}

{% block content %}
<a class="tiny secondary button btn btn-default" href="{{context|safe}}/document/list?folderId={{folderId}}"><i class="fa fa-arrow-left fa-fw"></i>Back to Folder</a>
<br/><br/>

{%if customDocType%}
{%set customDocTypeUrl = '/' + customDocType %}
{%endif%}
 <form name="myForm" action="{{context|safe}}/document/add" method="post">
   <input type="hidden" name="_csrf" value="{{_csrf}}"/>
    <input type="hidden" name="folderId" value="{{folderId}}"/>
    {%if doc._id%}
    <input type="hidden" name="_id" value="{{doc._id.toString()}}"/>
    {%endif%}

    {%if not doc._id and not isFolder and docTypeMap %}
    <div class="form-group">
      <label>Document Type:
        <select class="form-control" onchange="reloadDocType(this)">
          <option value="">File</option>  
          {%for key, docType in docTypeMap%}
    
          <option value="{{key}}" {%if doc.docType == key%}selected{%endif%}>{{docType}}</option>
          {%endfor%}
        </select>
      </label>
    </div>
    {%endif%}

    <div class="form-group">
      <label>Name: </label>

      <input class="form-control" type="text" name="name" placeholder="name" value="{{doc.name}}" />
    </div>
    {%if isFolder%}
    <input type="hidden" name="docType" value="folder"/>
    
    {%else%}

    

    {%set hasDocType = false%}

    {%for editable in modelEditables%}
      {%if editable.name != 'name'%}
       
       {%if editable.name == 'docType'%}
         {%set hasDocType = true%}
         <select class="form-control" name="docType">
          <option value="file">File</option>  
          {%for key, docType in docTypeMap%}
    
          <option value="{{key}}" {%if doc.docType == key%}selected{%endif%}>{{docType}}</option>
          {%endfor%}
        </select>
       {%elif editable.type == 'text' %}
          {%set itemValue = doc[editable.name]%}

           <div class="form-group"><label>{{editable.label}}:</label>

            <input class="form-control" type="text" name="{{editable.name}}" placeholder="{{editable.label}}" value="{{itemValue}}"/>
          </div>

        {%elif  editable.type == 'date'%}
          {%set itemValue = doc[editable.name] + ''%}

           <div class="form-group"><label>{{editable.label}}:</label>

            <input  class="form-control" type="text" name="{{editable.name}}" placeholder="{{editable.label}}" value="{{itemValue}}"/>
          </div>

        {%elif  editable.type == 'file'%}
         <div class="form-group"><label>{{editable.label}}:</label>
          {%if doc.mimeType and 'image' in doc.mimeType %}
            <img src="{{context|safe}}/document/download?_id={{doc._id.toString()|urlencode}}" alt="Img" />
          {%else%}
            <textarea id="MAIN_EDIT_TEXT" class="form-control" name="{{editable.name}}" placeholder="{{editable.label}}" style="width: 100%; height: 400px;">{%set fileItem = doc['content']%}{%if fileItem%}{{fileItem.toString('utf8')}}{%endif%}</textarea>
          {%endif%}
         
        </div>
        {%endif%}
      {%endif%}
    {%endfor%}

    {%if not hasDocType%}
    <input type="hidden" name="docType" value="{{doc.docType}}"/>
    {%endif%}

    {%endif%}
    
    
    <br/>
    {%if doc._id%}
    <input class="tiny button btn btn-primary" type="submit" value="Update"/>
    <a href="{{context|safe}}/document/delete/{{doc._id.toString()|urlencode}}" onclick="return confirm('Are you sure you want to delete this?')" class="tiny button btn btn-danger" style="float: right;">Delete</a>
    {%else%}
    <input class="tiny button btn btn-primary" type="submit" value="Add"/>
    {%endif%}

    
  </form>

{% endblock %}


{% block beforeEndBody %}
<script>
function bindEvent(element, type, handler) {
   if(element.addEventListener) {
      element.addEventListener(type, handler, false);
   } else {
      element.attachEvent('on'+type, handler);
   }
}

bindEvent(window, 'load', function() {
  document.myForm.name.select();
});


function removeParam(key, sourceURL) {
    var rtn = sourceURL.split("?")[0],
        param,
        params_arr = [],
        queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
    if (queryString !== "") {
        params_arr = queryString.split("&");
        for (var i = params_arr.length - 1; i >= 0; i -= 1) {
            param = params_arr[i].split("=")[0];
            if (param === key) {
                params_arr.splice(i, 1);
            }
        }
        rtn = rtn + "?" + params_arr.join("&");
    }
    return rtn;
}

function reloadDocType(ctrl) {
  var url = window.location.href;    
  url = removeParam('docType', url);
  if (url.indexOf('?') > -1){
     url += '&'
  }else{
     url += '?'
  }

  url += 'docType=' + $(ctrl).val();
  window.location.href = url;
}

{%if cmMode%}
$(function() {
  var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('MAIN_EDIT_TEXT'), {
    mode:  "{{cmMode}}",
    lineWrapping: true,
  });
})
{%endif%}
</script>
{% endblock %}