{% extends 'layout.html' %}

{% block title %}{{ dbName }}{% endblock %}

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


{% block content %}
<div class="stats">
	<h2>Database Stats</h2>
	<table class="table table-bordered table-striped">
	  <tr>
		<td class="span2"><strong>Collections (including system.namespaces)</strong></td>
		<td class="span3">{{ stats.collections }}</td>
	  </tr>
	  <tr>
		<td><strong>Data Size</strong></td>
		<td>{{ stats.dataSize }}</td>
	  </tr>
	  <tr>
		<td><strong>Storage Size</strong></td>
		<td>{{ stats.storageSize }}</td>
	  </tr>
	  <tr>
		<td><strong>File Size (on disk)</strong></td>
		<td>{{ stats.fileSize }}</td>
	  </tr>
	</table>
</div>

{% if !settings.read_only %}
<h2>Create Collection</h2>
<form class="well form-inline" method="POST">
    <div class="input-prepend">
      <span class="add-on">{{ dbName }} . </span>
      <input class="input-medium" type="text" id="collection" name="collection" placeholder="Collection Name" title="Collection Name">
    </div>
  <button type="submit" class="btn btn-primary">
  <i class="icon-folder-open icon-white"></i>
  Create collection
  </button>
</form>

<script>
  $( document ).ready( function() {
    $( '#collection' ).popover({ content: "Collection names must begin with a letter or underscore, and can contain only letters, numbers, underscores and dots." });

    $( '.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>
{% endif %}

<table>
  <tr>
    <td>
      <h2>Collections</h2>
    </td>
    <td>
      <a href="{{ baseHref }}db/{{ dbName }}/updateCollections" class="btn btn-primary">
        <i class="icon-refresh icon-white"></i>
      </a>
    </td>
  </tr>
</table>

<table class="table table-bordered table-striped table-condensed">
  {% for c in colls %}
  <tr>
    <td class="span2">
      <a href="{{ baseHref }}db/{{ dbName }}/{{ c }}" class="btn btn-success span2">
        <i class="icon-list-alt icon-white"></i> View
      </a>
    </td>
	<td class="span2">
	     <a href="{{ baseHref }}db/{{ dbName }}/export/{{ c }}" class="btn btn-warning span2">
	      <i class="icon-download icon-white"></i> Export
	    </a>
	</td>
    <td><h3><a href="{{ baseHref }}db/{{ dbName }}/{{ c }}">{{ c }}</a></h3></td>
    {% if !settings.read_only %}
    <td class="span2">
      <form method="POST" id="db-{{ dbName }}-{{ c }}" action="{{ baseHref }}db/{{ dbName }}/{{ c }}" style="margin: 0px;">
        <input type="hidden" name="_method" value="delete">
        <button type="submit" class="hidden"></button>
      </form>
      <button class="btn btn-danger span2 deleteButton" collection-name="{{ c }}" childof="db-{{ dbName }}-{{ c }}">
        <i class="icon-trash icon-white"></i>
        Delete
      </button>
    </td>
    {% endif %}
  </tr>
  {% endfor %}
</table>

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

{% endblock %}