{% 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">
	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">
  <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 %}

<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>

{% for document in documents %}
<div class="row">
<div class="span8">
  <textarea readonly="readonly" id="doc_{{ loop.index }}" name="doc_{{ loop.index }}">{{ document }}</textarea>
  <p>&nbsp;</p>

  <script>
    var doc_{{ loop.index }} = CodeMirror.fromTextArea(document.getElementById('doc_{{ loop.index }}'), {
      mode: { name: "javascript", json: true },
      readOnly: true,
      indentUnit: 4,
      theme: "{{ editorTheme }}",
      lineNumbers: true
      {%- if collectionName != 'system.indexes' && collectionName != 'system.users' %},
      onFocus: function() { loadDocument('{{ docs[loop.index0]._id|to_string }}') }
      {%- endif %}
    });
  </script>
</div>
{% if !settings.read_only %}
<div class="span1">
  <br /><br />
  <form method="POST" action="{{ baseHref }}db/{{ dbName }}/{{ collectionName }}/{{ docs[loop.index0]._id|to_string|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>
{% endif %}
</div>
{% endfor %}

<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 %}


{#
  # 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">
<div class="span5">

{% if !settings.read_only %}
<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>
<div class="span4">

<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>
 $( 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' );
         } else {
           // wrong collection name
         }
   });
  });
});
</script>

</div>
{% endif %}

<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>

<div class="span4">
	<h2>Export Collection</h2>
	<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>

{% 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 %}