{% extends "views/layouts/base.html" %}
{% block yield %}

  <div class="slds-box slds-theme--info slds-m-bottom--small">
    <span class="slds-icon_container slds-p-right--xx-small">
      <svg aria-hidden="true" class="slds-icon slds-icon--small">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/app/static/lds/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
      </svg>
    </span>
    A deployment connection is a Salesforce.com org that you wish to deploy to from this MavensMate project.
  </div>

  {% if connections.length > 0 %}
  <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-m-bottom--small">
    <thead>
      <tr class="slds-text-heading--label">
        <th scope="col">
          <div class="slds-truncate" title="Connection Name">Connection Name</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Username">Instance URL</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="">Action</div>
        </th>
      </tr>
    </thead>
    <tbody>
      {% for c in connections %}
        <tr>
          <th scope="row" data-label="Connection Name">
            <div class="slds-truncate" title="{{ c['name'] }}">{{ c['name'] }}</div>
          </th>
          <td data-label="Instance URL">
            <div class="slds-truncate" title="{{ c.instanceUrl || '' }}">{{ c.instanceUrl || '' }}</div>
          </td>
          <td data-label="Action">
            <a href="javascript:void(0);" onclick="deleteConnection('{{ c['id'] }}')">Delete</a>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}

  <!-- NEW CONNECTION MODAL -->
  <div aria-hidden="true" role="dialog" class="slds-modal slds-fade-in-open slds-hide" id="connection-modal">
    <form class="slds-form--stacked" action="/app/connections/auth" method="POST">
      <div class="slds-modal__container">
          <div class="slds-modal__header">
              <h2 class="slds-text-heading--medium">New Deployment Connection</h2>
          </div>
          <div class="slds-modal__content slds-p-around--medium">
            <input type="hidden" name="pid" value="{{project.settings.id}}"/>
            <div class="slds-form--stacked">
              <fieldset>
                <div class="slds-form-element">
                  <label class="slds-form-element__label" for="inputSample2">Connection Name</label>
                  <div class="slds-form-element__control">
                    <input placeholder="e.g. test-sandbox" type="text" name="name" class="slds-input">
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
          <div class="slds-modal__footer">
            <a class="slds-button slds-button--neutral" id="btn-cancel-new-connection" href="javascript:void(0);">Cancel</a>
            <button class="slds-button slds-button--neutral slds-button--brand" type="submit" id="btn-create-connection">Create Connection</button>
          </div>
      </div>
    </form>
  </div>
{% endblock %}


{% block buttons %}
  <button class="slds-button slds-button--brand" onclick="openConnectionModal()">New Deployment Connection</button>
  <a class="slds-button slds-button--neutral" href="/app/deploy/new?pid={{project.settings.id}}">Go to Deploy to Server</a>
  {% include 'views/partials/cancel_button.html' %}
{% endblock %}

{% block body_js %}
<script type="text/javascript">

  $(function() {
    $("#btn-cancel-new-connection").on('click', function() {
      $('#connection-modal').modal('dismiss');
    });
  });

  function openConnectionModal() {
    $('#connection-modal').modal('show');
    $('#connection-modal input:text:visible:first').focus();
  }

  function deleteConnection(id) {
    $.ajax({
      type: "DELETE",
      dataType: 'json',
      contentType: 'application/json; charset=utf-8',
      url: "{{ mavensmate.ui.getBaseUrl() }}/app/connections/"+id,
      data: JSON.stringify({
        id : id
      }),
      beforeSend: function() { showLoading('Removing connection'); },
      complete: function(data) {
        $("#connection_error_message").html('');
        console.log(data);
        var response = JSON.parse(data.responseText);
        if (response["success"] == false) {
          $("#connection_error_message").html(response["result"]);
          $("#connection_error_wrapper").show();
          hideLoading();
        } else {
          $("#connection_error_wrapper").hide();
          hideLoading();
          window.location.reload(false);
        }
      }
    });
  }
</script>

{% endblock %}