<div id="{% block modal_id %}{% endblock %}"
  class="{% block modal_class %}{% if hide %}modal{% else %}static_page{% endif %}{% endblock %} {{ modal_size|default:'md' }}">
  <div class="{% if hide %}modal-dialog{% endif %} modal-{{ modal_size|default:'md' }}">
    <div class="{% if hide %}modal-content{% endif %}">
      <div class="modal-header">
        {% if hide %}<a href="#" class="close" data-dismiss="modal">&times;</a>{% endif %}
        {% if hide %}<a href="#" class="full-screen" id="modal-full-screen"><i class="fa fa-expand"></i></a>{% endif %}
        <h3>{% block modal-header %}{% endblock %}</h3>
      </div>
      {% comment %}
      {% if table %}
      <div class="modal-body">
      {{ table.render }}
      </div>
      <hr>
      {% endif %}
      {% endcomment %}

      <form id="{% block form_id %}{% endblock %}"
            ng-controller="{% block ng_controller %}DummyCtrl{% endblock %}"
            name="{% block form_name %}{% endblock %}"
            autocomplete="{% block autocomplete %}{% if form.no_autocomplete %}off{% endif %}{% endblock %}"
            class="{% block form_class %}{% endblock %}"
            action="{% block form_action %}{% endblock %}"
            method="{% block form-method %}POST{% endblock %}"
        {% block form_validation %}{% endblock %}
            {% if add_to_field %}data-add-to-field="{{ add_to_field }}"{% endif %} {% block form_attrs %}{% endblock %}>{% csrf_token %}
        <div class="modal-body clearfix">
        {% comment %}
        These fake fields are required to prevent Chrome v34+ from autofilling form.
        {% endcomment %}
        {% if form.no_autocomplete %}
        <div class="fake_credentials" style="display: none">
        <input type="text" name="fake_email" value="" />
        <input type="password" name="fake_password" value="" />
        </div>
        {% endif %}
        {% block modal-body %}
          <div class="left">
            <fieldset>
            {% include "horizon/common/_form_fields.html" %}
            </fieldset>
          </div>
          <div class="right">
            {% block modal-body-right %}{% endblock %}
          </div>
        {% endblock %}
        </div>
        <div class="modal-footer">
        {% block modal-footer %}
          <a href="{{ cancel_url }}" class="btn btn-default cancel">{{ cancel_label }}</a>
          <input class="btn btn-primary" type="submit" value="{{ submit_label }}">
        {% endblock %}
        </div>
      </form>

    </div>
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    $("#modal-full-screen").on('click', function(event){
      var $el = $(this).closest('.modal-dialog');
      var $modal = $(this).closest('.modal');
      if($el.hasClass("modal-sm")){
        $el.removeClass('modal-sm').addClass('modal-md');  
      }else if($el.hasClass("modal-md")){
        $el.removeClass('modal-md').addClass('modal-lg');  
      }else if($el.hasClass("modal-lg")){
        $el.removeClass('modal-lg').addClass('modal-fullscreen');  
        $modal.addClass('fullscreen');  
      }else if($el.hasClass("modal-fullscreen")){
        $modal.removeClass('fullscreen');
        $el.removeClass('modal-fullscreen').addClass('modal-sm');  
      }
    });
  });
</script>

{% block modal-js %}
{% endblock %}
