{% extends "index-base.html" %}

{% block header %}
{% endblock %}

{% block inner_content %}
  <div class="row col-12">
      <div class="col-5">
        <h3 style="text-align:left; padding-top:13px; padding-left:15px"> Batch Edit Tags</h3>
      </div>
  </div>

  <table class="table table-bordered table-striped table-condensed">
    <thead>
      <tr>
        {% for item in ['Tag', 'Number of Posts', 'Actions'] %}
          <th>
          {{ item }}
          {% if item != 'Actions' %}
            <i id="sortBy{{item|replace(' ', '_')}}Asc" class="glyphicon glyphicon-chevron-up"></i>
            <i id="sortBy{{item|replace(' ', '_')}}Desc" class="glyphicon glyphicon-chevron-down"></i>
          {% endif %}
          </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for tag in tags %}
      {% set tag_id = tag.id %}
      <tr>
        <td> {{ tag.name }} </td>
        <td>
          {{ tags_to_posts[tag_id]|length}}
          <button type="button"
                  data-toggle="modal"
                  data-target="#show_posts_{{tag_id|safe}}"
                  class="btn"
                  style="background-color: transparent; padding-top: 0px; padding-left: 2px"
                  >
            <i class="glyphicon glyphicon-clickable glyphicon-list"></i>
          </button>

          <div  class="modal fade"
                id="show_posts_{{tag_id|safe}}"
                tabindex="-1"
                role="dialog">
          <div class="modal-dialog" role="document">
          <div class="modal-table">
            <div class="modal-content">
              <div id='modal-body-label' class="panel-header">
                {{ "All posts with tag: " + tag.name|safe }}
              </div>
              <div id="modal-body" class="panel-body">
                <ul>
                  {% for post in tags_to_posts[tag_id] %}
                  <li>
                     <a href="{{'/render?markdown=' + post[0]|urlencode}}">
                      {{ post[1] }}
                    </a>
                  </li>
                  {% endfor %}
                </ul>
                <p>
                  <button class="btn btn-primary" data-dismiss="modal">Done</button>
                </p>
              </div>
            </div>
          </div>
          </div>
          </div>
        </td>
        <td>
          <button type="button" data-toggle="modal"
                  class="btn btn-batch-tags-invisible"
                  data-target="#rename_tags_{{tag_id|safe}}"
                  style="padding-top: 0px">
            <i class="glyphicon glyphicon-clickable glyphicon-edit"></i>
          </button>
          <button type="button" data-toggle="modal"
                  class="btn btn-batch-tags-invisible"
                  data-target="#remove_tags_{{tag_id|safe}}"
                  style="padding-top: 0px">
            <i class="glyphicon glyphicon-clickable glyphicon-remove"></i>
          </button>
          <button type="button" data-toggle="modal"
                  class="btn btn-batch-tags-invisible"
                  data-target="#remove_some_posts__{{tag_id|safe}}"
                  style="padding-top: 0px">
            <i class="glyphicon glyphicon-clickable glyphicon-minus-sign"></i>
          </button>
          <button type="button" data-toggle="modal"
                  class="btn btn-batch-tags-invisible"
                  data-target="#edit_tag_description_{{tag_id|safe}}"
                  style="padding-top: 0px">
            <i class="glyphicon glyphicon-clickable glyphicon-tag"></i>
          </button>

          <div  class="modal fade"
                id="rename_tags_{{tag_id|safe}}"
                tabindex="-1"
                role="dialog">
            <div class="modal-dialog" role="document">
               <div class="modal-table">
                <div class="modal-cell">
                  <div class="modal-content">
                    <div id='modal-body-label' class="panel-header">
                      Rename Tag
                    </div>
                    <div id="modal-body" class="panel-body">
                      <p>
                        {{ "Are you sure you want to rename the tag: " + tag.name|safe + "?"}}
                      </p>
                      <div class="col-sm-8">
                        <input id="{{tag_id}}__new_tag_name"
                               type="text"
                               placeholder="Enter the new tag name here:"
                               class="batch-tags-text-field">
                      </div>
                      <br><br>
                      <p>
                        <button class="btn btn-primary" id="rename__{{tag_id}}" data-behavior='modal-close'>Rename Me</button>
                        <button class="btn" data-dismiss="modal"> Cancel </button>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
          <div  class="modal fade"
                id="remove_tags_{{tag_id|safe}}"
                tabindex="-1"
                role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-table">
                <div class="modal-cell">
                  <div class="modal-content">
                    <div id='modal-body-label' class="panel-header">
                      Delete Tag
                    </div>
                    <div id="modal-body" class="panel-body">
                    <p>
                      {{ "Are you sure you want to delete the tag: " + tag.name|safe + "?"}}
                    </p>
                    <p>
                      <button class="btn btn-primary" id="delete__{{tag_id}}" data-behavior='modal-close'>Delete Me</button>
                      <button class="btn" data-dismiss="modal"> Cancel </button>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div  class="modal fade"
                id="remove_some_posts__{{tag_id|safe}}"
                tabindex="-1"
                role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-table">
              <div class="modal-cell">
                <div class="modal-content">
                  <div id='modal-body-label' class="panel-header">
                    {{ "Remove "  + full_tag|safe + " from certain posts" }}
                  </div>
                  <div id="modal-body" class="panel-body">
                    <p id="{{'check_box__' ~ tag_id}}">
                      {% for post in tags_to_posts[tag_id] %}
                      <label>
                        <input type='checkbox' id='{{post[0]}}'>
                          <a href="{{'/render?markdown=' + post[0]|urlencode}}">
                            {{ post[1] }}
                          </a>
                        </input>
                      </label>
                      <br>
                      {% endfor %}
                    </p>
                    <p>
                      <button class="btn btn-primary" id="{{'remove_posts__' ~ tag_id }}" data-behavior='modal-close'>Remove Tag From Posts</button>
                      <button class="btn" data-dismiss="modal"> Cancel </button>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div  class="modal fade"
                id="edit_tag_description_{{tag_id|safe}}"
                tabindex="-1"
                role="dialog">
          <div class="modal-dialog" role="document">
            <div class="modal-table">
              <div class="modal-cell">
                <div class="modal-content">
                  <div id='modal-body-label' class="panel-header">
                    Edit Tag Description
                  </div>
                  <div id="modal-body" class="panel-body">
                  <p>
                    {% if tags_to_desc[tag_id] != "" %}
                      {{ "Are you sure you want to edit the description of " + tag.name|safe + "?"}} <br>
                      {{ "The current description is: " + tags_to_desc[tag_id]|safe }}
                    {% else %}
                      {{ "No current description exists! Add the tag description below" }}
                    {% endif %}
                  </p>
                  <div class="col-sm-8">
                    <input id="{{tag_id}}__new_tag_description"
                           type="text"
                           placeholder="Enter the new tag description here:"
                           class="batch-tags-text-field">
                  </div>
                  <br><br>
                  <p>
                    <button class="btn btn-primary" id="edit_desc__{{tag_id}}" data-behavior='modal-close'>Edit Me</button>
                    <button class="btn" data-dismiss="modal"> Cancel </button>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/tags.js')}}" type='text/javascript'></script>

<style>
[id^='rename_tags_']{
  font-size:12pt;
  padding-left:8px;
}

[id^='remove_tags_']{
  font-size:12pt;
}
.btn-group.pagination-group{
  display: none;
}

</style>
<script type="text/javascript">
  all_delete_buttons = $("[id^=delete_]")
  $.each(all_delete_buttons, function(i,v){
    tagsJx.deleteTagPosts(v);
  })

  all_rename_buttons = $("[id^=rename__]")
  $.each(all_rename_buttons, function(i,v){
    tagsJx.renameTagPosts(v);
  })

  remove_posts_buttons = $("[id^=remove_posts__]")
  $.each(remove_posts_buttons, function(i,v){
    tagsJx.removeTagFromPosts(v);
  })

  edit_descs_buttons = $("[id^=edit_desc__]")
  $.each(edit_descs_buttons, function(i,v){
    tagsJx.editTagDescription(v);
  })

{% for item in ['Tag', 'Number of Posts'] %}
  $("#sortBy{{item|replace(' ', '_')}}Desc").click(function() {
    document.location = '/batch_tags?sort_by={{item|replace(" ", "_")}}'
  });
  $("#sortBy{{item|replace(' ','_')}}Asc").click(function() {
    document.location = '/batch_tags?sort_by={{item|replace(" ", "_")}}&sort_asc=1'
  });
{% endfor %}



</script>
{% endblock %}
