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

<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="span1">
      <a href="{{ baseHref }}db/{{ dbName }}/{{ c }}" class="btn btn-success span2">
        <i class="icon-list-alt icon-white"></i><br>View
      </a>
    </td>
  <td class="span1">
       <a href="{{ baseHref }}db/{{ dbName }}/export/{{ c }}" class="btn btn-warning span1">
        <i class="icon-download icon-white"></i> Export
      </a>
  </td>
  <td class="span1">
       <a href="{{ baseHref }}db/{{ dbName }}/expArr/{{ c }}" class="btn btn-warning span1">
        <i class="icon-download icon-white"></i> [JSON]
      </a>
  </td>
    <td><h3><a href="{{ baseHref }}db/{{ dbName }}/{{ c }}">{{ c }}</a></h3></td>
    {% if !settings.read_only %}
    <td class="span1">
      <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 span1 deleteButton" collection-name="{{ c }}" childof="db-{{ dbName }}-{{ c }}">
        <i class="icon-trash icon-white"></i><br>
        Del
      </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>

{% 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>
'use strict';
$(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');
        }
      });
  });
});
</script>
{% endif %}

<div class="stats">
  <h2>Database Stats</h2>
  <table class="table table-bordered table-striped">
    <tr>
    <td class="span2"><strong>Collections (incl. 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>
    {% if stats.fileSize %}
      <tr>
      <td><strong>File Size (on disk)</strong></td>
      <td>{{ stats.fileSize }}</td>
      </tr>
    {% endif %}
    {% if stats.avgObjSize %}
      <tr>
      <td><strong>Avg Obj Size #</strong></td>
      <td>{{ stats.avgObjSize }}</td>
      </tr>
    {% endif %}
    {% if stats.objects %}
      <tr>
      <td><strong>Objects #</strong></td>
      <td>{{ stats.objects }}</td>
      </tr>
    {% endif %}
    {% if stats.numExtents %}
      <tr>
      <td><strong>Extents #</strong></td>
      <td>{{ stats.numExtents }}</td>
      </tr>
    {% endif %}
    {% if stats.extentFreeListNum %}
      <tr>
      <td><strong>Extents Free List</strong></td>
      <td>{{ stats.extentFreeListNum }}</td>
      </tr>
    {% endif %}
    {% if stats.indexes %}
      <tr>
      <td><strong>Indexes #</strong></td>
      <td>{{ stats.indexes }}</td>
      </tr>
    {% endif %}
    {% if stats.indexSize %}
      <tr>
      <td><strong>Index Size</strong></td>
      <td>{{ stats.indexSize }}</td>
      </tr>
    {% endif %}
    {% if stats.dataFileVersion %}
      <tr>
      <td><strong>Data File Version</strong></td>
      <td>{{ stats.dataFileVersion }}</td>
      </tr>
    {% endif %}
  </table>
</div>

{% endblock %}