{% extends 'layout.html' %}

{% block title %}{{ collectionName }}{% endblock %}


{% block head %}
  <link href="{{ baseHref }}stylesheets/codemirror.css" rel="stylesheet">
  <script type="text/javascript" src="{{ baseHref }}javascripts/codemirror-compressed.js"></script>
  <script type="text/javascript">
  'use strict';
  jQuery(document).ready(function ($) {
        $('#tabs').tab();
    if (document.location.href.indexOf('query=') >= 0) {
      $('#tabs a[href="#advanced"]').tab('show');
    }
    });
  </script>
  {% if editorTheme != "default" %}
  <link href="{{ baseHref }}stylesheets/theme/{{ editorTheme }}.css" rel="stylesheet">
  {% endif %}

  <style type="text/css">
    .CodeMirror-scroll {
      height: 120px;
      overflow: auto;
    }

    .modal-body .CodeMirror .CodeMirror-scroll {
      height: auto;
      min-height: 200px;
      overflow-y: hidden;
      overflow-x: auto;
      width: 100%;
    }
  </style>
{% endblock %}


{% block breadcrumb %}
  <li>
    <a href="">Home</a>
    <span class="divider">/</span>
  </li>
  <li>
    <a href="db/{{ dbName }}">{{ dbName }}</a>
    <span class="divider">/</span>
  </li>
  <li class="active">
    {{ collectionName }}
  </li>
{% endblock %}


{% block content %}

{% if !settings.read_only %}
  <p>
    <a data-toggle="modal" href="#addDocument" class="btn btn-success btn-large input-block-level">
      <i class="icon-file icon-white"></i>
      New Document
    </a>
  </p>
{% endif %}

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
  <li class="active"><a href="#simple" data-toggle="tab">Simple</a></li>
  <li><a href="#advanced" data-toggle="tab">Advanced</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
  <div class="tab-pane active" id="simple">
    <form class="well form-inline" method="get" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}">
      <div class="input-prepend">
        <input class="input-medium" type="text" id="key" name="key" placeholder="Key" title="Key" value="{{ key }}">
        <input class="input-medium" type="text" id="value" name="value" placeholder="Value" title="Value" value="{{ value }}">
        <select name="type" class="input-small">
        <option value="S" {% if type == 'S' %}selected {% endif %}>String</option>
        <option value="J" {% if type == 'J' %}selected {% endif %}>JSON, bool</option>
        <option value="N" {% if type == 'N' %}selected {% endif %}>Number</option>
        <option value="O" {% if type == 'O' %}selected {% endif %}>ObjectID</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary pull-right">
      <i class="icon-search icon-white"></i>
      Find
      </button>
    </form>
  </div>
  <div class="tab-pane" id="advanced">
    <form class="well form-inline" method="get" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}">
      <div class="input-prepend">
        <textarea class="input-medium" style="width: 350px; height: 150px" id="query" name="query" placeholder="Query" title="Query">{{ query }}</textarea>
        <textarea class="input-medium" style="width: 350px; height: 150px" id="fields" name="fields" placeholder="Fields" title="Fields">{{ fields }}</textarea>
      </div>
      <button type="submit" class="btn btn-primary pull-right">
      <i class="icon-search icon-white"></i>
      Find
      </button>
    </form>
  </div>
</div>
<br/>

<div class="modal fade" id="addDocument">
  <form method="post" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}">

  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Add Document</h3>
  </div>

  <div class="modal-body">
    <textarea id="document" name="document">{
    "_id": ObjectID()
}</textarea>
  </div>

  <div class="modal-footer">
    <button class="btn btn-error" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-success">
      <i class="icon-pencil icon-white"></i>
      Save
    </button>
  </div>

  </form>
</div>

<script>
  $('#addDocument').modal('hide');
  var addDoc = CodeMirror.fromTextArea(document.getElementById('document'), {
    mode: { name: 'javascript', json: true },
    indentUnit: 4,
    electricChars: true,
    matchBrackets: true,
    lineNumbers: true,
    theme: '{{ editorTheme }}'
  });
</script>

{% if documents.length == 0 %}
  <p class="well">
    No documents found.
  </p>
{% else %}

{% if collectionName != 'system.indexes' %}
  <script type="text/javascript">
    function loadDocument(id) {
      location.href = '{{ baseHref }}db/{{ dbName }}/{{ collectionName }}/' + encodeURIComponent(id);
    }
  </script>
{% endif %}

{% if pagination %}
  <ul class="pager span7">
    <li class="previous"><a href="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}?skip=0&key={{ key }}&value={{ value }}&type={{ type }}&query={{ query }}&fields= {{ fields }}">&larr; First</a></li>
    <li{% if prev.skip < 0 %} class="disabled"{% endif %}>
      <a{% if prev.skip >= 0 %} href="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}?skip={{ prev.skip }}&key={{ key }}&value={{ value }}&type={{ type }}&query={{ query }}&fields= {{ fields }}"{% endif %}>&larr; Prev</a>
    </li>

    <li{% if next.skip >= stats.count %} class="disabled"{% endif %}>
      <a{% if next.skip < stats.count %} href="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}?skip={{ next.skip }}&key={{ key }}&value={{ value }}&type={{ type }}&query={{ query }}&fields= {{ fields }}"{% endif %}>Next &rarr;</a>
    </li>

    <li class="next"><a href="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}?skip={{ last }}&key={{ key }}&value={{ value }}&type={{ type }}&query={{ query }}&fields= {{ fields }}">Last &rarr;</a></li>
  </ul>
{% endif %}

<div class="tableWrapper">
  <table class="table table-striped">
    <tr>
      {% for column in columns %}
        <th>{{column}}</th>
      {% endfor %}
      <th>Del</th>
    </tr>
    {% for document in docs %}
      <tr onclick="loadDocument( '{{ docs[loop.index0]._id | json | safe | url_encode }}')">
        {% for column in columns %}
          <td>
            {% if document[column] == "" %}
              {{column}} is empty for {{document["_id"]| to_display}}
            {% else %}
              {% if !document[column] %}
                {% if column|is_embeddedDocumentNotation %}
                  {{edKey(document, column)}}
                {% else %}

                {% endif %}
              {% else %}
                {{document[column] | to_display | safe}}
              {% endif %}
            {% endif %}
          </td>
        {% endfor %}
        {% if !settings.read_only %}
          <td>
            <div class="span1">
              <form method="POST" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}/{{ docs[loop.index0]._id| json | safe | url_encode }}">
              <input type="hidden" name="_method" value="delete">
              <button type="submit" class="btn btn-danger btn-mini">
              <i class="icon-remove icon-white"></i>
              </button>
              </form>
            </div>
          </td>
        {% endif %}
      </tr>
    {% endfor %}
  </table>
</div>

{% if pagination %}
  <div class="pagination pagination-centered span7">
    <ul>
      {%- if prev2.skip >= 0 %}
      <li><a href="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}?skip={{ prev2.skip }}&key={{ key }}&value={{ value }}&type={{ type }}&query={{ query }}&fields= {{ fields }}">{{ prev2.page }}</a></li>
      {% else %}
      <li><a>&nbsp;</a></li>
      {%- endif %}

      {%- if prev.skip >= 0 %}
      <li><a href="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}?skip={{ prev.skip }}&key={{ key }}&value={{ value }}&type={{ type }}&query={{ query }}&fields= {{ fields }}">{{ prev.page }}</a></li>
      {% else %}
      <li><a>&nbsp;</a></li>
      {%- endif %}

      <li class="active"><a href="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}?skip={{ skip }}&key={{ key }}&value={{ value }}&type={{ type }}&query={{ query }}&fields= {{ fields }}">{{ here }}</a></li>

      {%- if next.skip < stats.count %}
      <li><a href="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}?skip={{ next.skip }}&key={{ key }}&value={{ value }}&type={{ type }}&query={{ query }}&fields= {{ fields }}">{{ next.page }}</a></li>
      {% else %}
      <li><a>&nbsp;</a></li>
      {% endif %}

      {%- if next2.skip < stats.count %}
      <li><a href="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}?skip={{ next2.skip }}&key={{ key }}&value={{ value }}&type={{ type }}&query={{ query }}&fields= {{ fields }}">{{ next2.page }}</a></li>
      {% else %}
      <li><a>&nbsp;</a></li>
      {% endif %}
    </ul>
  </div>
{% endif %}

{% endif %}

{#
  # Not very useful, since it doesn't show correct index names
  # Could use db.coll.getIndexes(), but that is an extra query on every collection page
<h2>Indexes</h2>
{% if stats.nindexes == 0 %}
<p class="well">
No indexes found.
</p>
{% else %}
<table class="table table-bordered table-striped">
  {% for size in stats.indexSizes %}
  <tr>
    <td>{{ loop.key }}</td>
    <td>{{ size }} bytes</td>
  </tr>
  {% endfor %}
</table>
{% endif %}
#}

<div class="row">
  {% if !settings.read_only %}
    <div class="span9">
      <h2>Rename Collection</h2>
      <form method="POST" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}" class="well form-inline">
        <input type="hidden" name="_method" value="put">
        <div class="input-prepend">
          <span class="add-on">{{ dbName }} . </span>
          <input class="input-medium" type="text" id="collection" name="collection" placeholder="{{ collectionName }}">
        </div>
        <button type="submit" class="btn btn-primary">
        <i class="icon-tag icon-white"></i>
        Rename
        </button>
      </form>
    </div>
  {% endif %}

  <div class="span9">
    <h2>Export</h2>
    <div class="span4">
      <h3>Standard</h3>
      <div class="well">
      <a href="{{ baseHref }}db/{{ dbName }}/export/{{ collectionName }}" class="btn btn-warning span2">
        <i class="icon-download icon-white"></i> Export
      </a>
      </div>
    </div>


    <div class="span4">
      <h3>--jsonArray</h3>
      <div class="well">
      <a href="{{ baseHref }}db/{{ dbName }}/expArr/{{ collectionName }}" class="btn btn-warning span2">
        <i class="icon-download icon-white"></i> Export
      </a>
      </div>
    </div>
  </div>

  {% if !settings.read_only %}
    <div class="span9">
      <h2>Delete Collection</h2>
      <form method="POST" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}" id="db-{{ dbName }}-{{ collectionName }}" class="well">
        <input type="hidden" name="_method" value="delete">
        <input type="submit" class="hidden" />
        <button class="btn btn-danger deleteButton" title="Warning" collection-name="{{ collectionName }}" childof="db-{{ dbName }}-{{ collectionName }}">
          <i class="icon-trash icon-white"></i>
          Delete
        </button>
      </form>

<script>
'use strict';
$(document).ready(function() {
  $('.deleteButton').popover({ placement: 'left', title: 'Warning', content: 'Are you sure you want to delete this collection? All documents will be deleted.' });

  $('.deleteButton').on('click', function(event) {
    event.preventDefault();
    var target = $(this);
    var parentForm = $('#' + target.attr('childof'));

    $('#confirmation-input').attr('shouldbe', target.attr('collection-name'));
    $('#modal-collection-name').text(target.attr('collection-name'));
    $('#confirm-deletion').modal({ backdrop: 'static', keyboard: false })
    .one('click', '#delete', function() {
      var input = $('#confirmation-input');
      if (input.val().toLowerCase() === input.attr('shouldbe').toLowerCase()) {
        parentForm.trigger('submit');
      }
    });
  });
});
</script>
    </div>

    <div id="confirm-deletion" class="modal hide fade">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Delete collection</h4>
      </div>
      <div class="modal-body">
        <p>
          Be careful! You are about to delete whole <strong><span id="modal-collection-name"></span></strong> collection.
        </p>
        <p>
          <label for="confirmation-input">Type the collection name to proceed.</label>
          <input type="text" id="confirmation-input" name="confirmation-input" shouldbe="" value="" />
        </p>
      </div>

      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn" id="delete">Delete</button>
        <button type="button" data-dismiss="modal" class="btn btn-primary">Cancel</button>
      </div>
    </div>
  {% endif %}
{% endblock %}

{% block sidebar %}
  <div class="sidebar-nav">
    <ul class="nav nav-list">
      <li class="nav-header">Collection Stats</li>
      <li>
        <strong>Documents</strong>
        <span class="pull-right" id="collStatsCount">{{ stats.count }}</span>
      </li>
      <li>
        <strong>Total doc size</strong>
        <span class="pull-right">{{ stats.size|convertBytes }}</span>
      </li>
      <li>
        <strong>Average doc size</strong>
        <span class="pull-right">{{ stats.avgObjSize|convertBytes }}</span>
      </li>
      <li>
        <strong>Pre-allocated size</strong>
        <span class="pull-right">{{ stats.storageSize|convertBytes }}</span>
      </li>
      <li>&nbsp;</li>
      <li>
        <strong>Indexes</strong>
        <span class="pull-right">{{ stats.nindexes }}</span>
      </li>
      <li>
        <strong>Total index size</strong>
        <span class="pull-right">{{ stats.totalIndexSize|convertBytes }}</span>
      </li>
      <li>&nbsp;</li>
      <li>
        <strong>Padding factor</strong>
        <span class="pull-right">{{ stats.paddingFactor }}</span>
      </li>
      <li>
        <strong>Extents</strong>
        <span class="pull-right">{{ stats.numExtents }}</span>
      </li>
    </ul>
  </div>
{% endblock %}