{% extends "geonode_base.html" %}
{% load i18n %}
{% load url from future %}
{% load bootstrap_tags %}
{% load base_tags %}
{% load guardian_tags %}
{% load floppyforms %}

{% block head %}
    <style>
        .xxs-font-size{
            font-size: 10px;
        }
        textarea{
            width:100%;
        }
        select{
            width:100%;
        }
        .test-class{
            background-color: red;
        }
        table{
            table-layout:fixed;
            width: 100%;
        }
        td > input{
            width: 100%;
        }
        h2.page-title {
          max-width: calc(100% - 300px);
        }
        .input-empty{
            border-color: red;
            border-style: double;
        }

        input[type="text"] {
            width: 100%;
            left: 0;
            right: 0;
        }
        .fancy-checkbox input[type="radio"],
        .fancy-checkbox input[type="checkbox"],
        .fancy-checkbox .checked {
            display: none;
        }

        .fancy-checkbox input[type="radio"]:checked ~ .checked,
        .fancy-checkbox input[type="checkbox"]:checked ~ .checked {
            display: inline-block;
            color:red;
        }

        .fancy-checkbox input[type="radio"]:checked ~ .unchecked,
        .fancy-checkbox input[type="checkbox"]:checked ~ .unchecked {
            display: none;
        }

        .tokenfield,
        #id_resource-title {
            width: 100% !important;
        }
        #edit-metadata .tab-pane > .panel-group >.panel.panel-default, #settings .panel-group > .panel.panel-default {
          border: none;
        }
        #mdeditor_form > div.tab-content > .tab-pane {
          min-height: 450px;
        }
        #metadata_update {
          min-height: 550px;
        }

        .leaflet-container { /* all maps */
            height: 250px !important;
        }

        .map-overlay {
            display: none !important;
        }

        #regions_multiselect_container.content {
            position: absolute;
        }
        .fstControls {
            width: 100% !important;
        }

        .fstElement {
            font-size: 0.8em !important;
        }

        .fstResultItem {
            font-size: 1.2em !important;
        }

        .has-error .fstElement {
          border-color: red;
        }
        .treeview {
          max-height: 200px;
          overflow: auto;
          display: block;
          width: 350px;
        }
        .form-actions {
          text-align: right;
        }
    </style>
{{ block.super }}
{% endblock head %}

{% block title %} {{ block.super }} {% endblock %}

{% block body_class %}data{% endblock body_class %}

{% block body_outer %}
<div class="modal fade" style="width: 100%; height: 100%;" id="preview_pleaseWaitDialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1>Processing...</h1>
            </div>
            <div class="modal-body">
                <div class="progress">
                  <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
                    Updating Metadata...
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" style="width: 100%; height: 100%;" id="category_mandatoryDialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content panel-warning">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">ERROR</h4>
      </div>
      <div class="modal-body">
        Topic Category is mandatory and cannot be empty!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" style="width: 100%; height: 100%;" id="group_mandatoryDialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content panel-warning">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">ERROR</h4>
      </div>
      <div class="modal-body">
        Group is mandatory and cannot be empty!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="_thumbnail_feedbacks" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Message box</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

  {% block body %}{% endblock body %}
  {% block sidebar %}{% endblock sidebar %}
{% endblock body_outer %}

{% block extra_script %}
{{ block.super }}
    {% include 'metadata_form_js.html' %}

    {% if GEONODE_SECURITY_ENABLED %}
     {% include "_permissions_form_js.html" %}
    {% endif %}

    <script type="text/javascript">
      $('#set_thumbnail').click(function(){
        createMapThumbnail();
      });
    </script>

    <!-- <script type="text/javascript">
        $(document).ready(function() {
            $('#id_resource-regions').multiselect({
                enableClickableOptGroups: true,
                enableCollapsibleOptGroups: true,
                enableFiltering: true,
                includeSelectAllOption: true
            });
        });
    </script> -->

    <!-- <script type="text/javascript">
        $(document).ready(function() {
            $('#id_resource-regions').treeMultiselect({
                startCollapsed: true
            });
        });
    </script> -->

    <!-- Doc & Examples: http://dbrekalo.github.io/fastselect/ -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('#id_resource-regions').fastselect({
            });
        });
    </script>

{% endblock extra_script %}
