{% extends "views/layouts/base.html" %}
{% block yield %}
<script src="{{ mavensmate.ui.getStaticResourcePath() }}/js/jquery.tablesorter.min.js" type="text/javascript"></script>
<style>
	.slds-picklist__options {
		width:18rem;
	}
</style>

<div class="slds-tabs--scoped" data-aljs="tabs">
  <ul class="slds-tabs--scoped__nav" role="tablist">
      <li class="slds-tabs--scoped__item slds-text-heading--label" title="Targets" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-1" data-aljs-show="tab-default-1">Targets</a></li>
      <li class="slds-tabs--scoped__item slds-text-heading--label" title="Options" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-2" data-aljs-show="tab-default-2">Options</a></li>
      <li class="slds-tabs--scoped__item slds-text-heading--label" title="Metadata" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="true" aria-controls="tab-default-3" data-aljs-show="tab-default-3">Metadata</a></li>
      <li id="li-deploy-result" class="slds-tabs--scoped__item slds-text-heading--label" title="Deploy Results" role="presentation"><a class="slds-tabs--scoped__link" href="#" role="tab" tabindex="-1" aria-selected="true" aria-controls="tab-default-4" data-aljs-show="tab-default-4">Deploy Results</a></li>
  </ul>
  <div id="tab-default-1" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
  	{% if connections.length > 0 %}
    <div class="slds-form--stacked">
  		<fieldset>
  			<div class="slds-form-element slds-m-bottom--medium" >
			    <div class="slds-picklist--draggable slds-grid" data-aljs="multi-select" id="deploy-targets">
		        <div class="slds-form-element">
		            <span class="slds-form-element__label" aria-label="select-1">Deployment Connections</span>
		            <div class="slds-picklist slds-picklist--multi" data-aljs-multi-select="unselected">
		                <ul class="slds-picklist__options slds-picklist__options--multi shown" id="ul-org-metadata"></ul>
		            </div>
		        </div>
		        <div class="slds-grid slds-grid--vertical">
		            <button class="slds-button slds-button--icon-container" data-aljs-multi-select="unselect">
		                <svg aria-hidden="true" class="slds-button__icon">
		                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ mavensmate.ui.getStaticResourcePath() }}/lds/assets/icons/utility-sprite/svg/symbols.svg#left"></use>
		                </svg>
		                <span class="slds-assistive-text">Pick list</span>
		            </button>
		            <button class="slds-button slds-button--icon-container" data-aljs-multi-select="select">
		                <svg aria-hidden="true" class="slds-button__icon">
		                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{{ mavensmate.ui.getStaticResourcePath() }}/lds/assets/icons/utility-sprite/svg/symbols.svg#right"></use>
		                </svg>
		                <span class="slds-assistive-text">Pick list</span>
		            </button>
		        </div>
		        <div class="slds-form-element">
		            <span class="slds-form-element__label" aria-label="select-2">Deployment Targets</span>
		            <div class="slds-picklist slds-picklist--multi" data-aljs-multi-select="selected">
		                <ul class="slds-picklist__options slds-picklist__options--multi shown" id="ul-project-metadata"></ul>
		            </div>
		        </div>

			    </div>
  			</div>
  		</fieldset>
  	</div>
    {% else %}
      <div class="slds-notify slds-notify--toast slds-theme--warning" role="alert">
        <span class="slds-assistive-text">Success</span>
        <div class="slds-notify__content slds-grid">
          <svg aria-hidden="true" class="slds-icon slds-icon--small slds-m-right--small slds-col slds-no-flex">
            <use xlink:href="/app/static/lds/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
          </svg>
          <div class="slds-col slds-align-middle">
            <h2 class="slds-text-heading--small ">No deployment connections have been set up for this project. Go to <a href="/app/connections/new?pid={{project.settings.id}}">Deployment Connections</a>.</h2>
          </div>
        </div>
      </div>
    {% endif %}
  </div>
  <div id="tab-default-2" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
  	<div class="slds-form--stacked">

  		<fieldset>
  			<div class="slds-form-element">
  			  <label class="slds-form-element__label" for="inputSample2">Deployment Name (optional)</label>
  			  <div class="slds-form-element__control">
  			    <input id="new_deployment_name" name="new_deployment_name" class="slds-input" type="text" placeholder="e.g. QA Deployment">
  			  </div>
  			</div>

  			<div class="slds-form-element">
  				<div class="slds-form-element__control">
  					<label class="slds-checkbox" for="check_only">
  					  <input type="checkbox" checked="checked" id="check_only">
  					  <span class="slds-checkbox--faux"></span>
  					  <span class="slds-form-element__label">Validate Only</span>
  					</label>
  				</div>
				</div>

				<div class="slds-form-element">
  				<div class="slds-form-element__control">
  					<label class="slds-checkbox" for="rollback">
  					  <input type="checkbox" id="rollback" checked="checked">
  					  <span class="slds-checkbox--faux"></span>
  					  <span class="slds-form-element__label">Rollback on Error</span>
  					</label>
  				</div>
				</div>

				<div class="slds-form-element">
  				<div class="slds-form-element__control">
  					<label class="slds-checkbox" for="run_tests">
  					  <input type="checkbox" id="run_tests">
  					  <span class="slds-checkbox--faux"></span>
  					  <span class="slds-form-element__label">Run All Tests</span>
  					</label>
  				</div>
				</div>

				<div class="slds-form-element">
  				<div class="slds-form-element__control">
  					<label class="slds-checkbox" for="ignoreWarnings">
  					  <input type="checkbox" id="ignoreWarnings">
  					  <span class="slds-checkbox--faux"></span>
  					  <span class="slds-form-element__label">Ignore Warnings</span>
  					</label>
  				</div>
				</div>

  		</fieldset>

  	</div>
  </div>
  <div id="tab-default-3" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
    {% include 'views/partials/metadata_tree.html' %}
  </div>
  <div id="tab-default-4" class="slds-tabs--scoped__content slds-hide" role="tabpanel">
    <div id="deploy-result">
      <div class="slds-notify slds-notify--toast slds-theme--info" role="alert">
        <span class="slds-assistive-text">Information</span>
        <div class="slds-notify__content slds-grid">
          <svg aria-hidden="true" class="slds-icon slds-icon--small slds-m-right--small slds-col slds-no-flex">
            <use xlink:href="/app/static/lds/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
          </svg>
          <div class="slds-col slds-align-middle">
            <h2 class="slds-text-heading--small ">Deploy results will display here when available.</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}


{% block buttons %}
	<a id="btnDeploy" class="slds-button slds-button--brand">Validate Deployment</a>
	<a class="slds-button slds-button--neutral" href="/app/connections/new?pid={{project.settings.id}}">Deployment Connections</a>
	{% include 'views/partials/cancel_button.html' %}
{% endblock %}

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

  $(function() {
    $('[data-aljs="tabs"]').tabs();

    metadataTree = new mavensmate.MetadataTree();
    metadataTree.render();

    $("#btnDeploy").click(function() {
      deploy();
    });

    $("#check_only").change(function() {
      var text = (this.checked)? 'Validate Deployment' : 'Deploy to Server';
      $("#btnDeploy").html(text);
    });

    if (!{{ hasIndexedMetadata }}) {
      indexOrg();
    }

    // populate deploy target multiselect
    var deploymentConnections = [
    	{% for c in connections %}
  			{
  				id: '{{ c.id }}',
  				label: '{{ c.name }}',
          instanceUrl: '{{c.instanceUrl}}'
  			},
    	{% endfor %}
    ];

    $('#deploy-targets').multiSelect({
    	unselectedItems: deploymentConnections,
      selectedItems: []
    });
  });

	function isValidateOnly() {
		return $("#check_only").is(":checked");
	}

	function isRunTests() {
		return $("#run_tests").is(":checked");
	}

	function isRollbackOnError() {
		return $("#rollback").is(":checked");
	}

	function isIgnoreWarnings() {
		return $("#ignoreWarnings").is(":checked");
	}

	function indexOrg() {
    var opts = {
      ajax: {
        type: 'POST',
        url: '/app/project/{{project.settings.id}}/index',
        data: JSON.stringify({
          package: metadataTree.getPackage()
        })
      },
      message: {
        label: 'Updating metadata index...',
        detail: ' This operation can take a few minutes in large orgs. To minimize indexing time, limit your project\'s subscription to only those metadata types you absolutely need.<br/><br/>Thanks for being patient! :)'
      }
    };

    mavensmate.request(opts)
      .then(function(response) {
        if (!metadataTree) {
          metadataTree = new mavensmate.MetadataTree();
          metadataTree.render();
        } else {
          metadataTree.dynatree.reload();
        }
        showToast('Project metadata index updated successfully', 'success');
      })
      .catch(function(err) {
        console.error('could not update index', err);
      })
      .finally(function() {
        hideLoading();
      });
	}

	function deploy() {
    var opts = {
      showPageHeaderLoading: true,
      ajax: {
        type: 'POST',
        url: "/app/deploy",
        data: JSON.stringify({
          targets: $('#deploy-targets').multiSelect('getSelectedItems'), // list of org connection ids
          package: metadataTree.getPackage(),
          deploymentName: $("#new_deployment_name").val(),
          ui: true,
          deployOptions: {
            rollbackOnError: isRollbackOnError(),
            performRetrieve: true,
            checkOnly: isValidateOnly(),
            ignoreWarnings: isIgnoreWarnings(),
            runAllTests: isRunTests()
          }
        })
      }
    };

    mavensmate.request(opts)
      .then(function(response) {
        console.log('deploy done', response);
        showToast('Deployment complete', 'success');
        $('#deploy-result').html(response.result.html);
        $('.deploy-result-tabs').tabs();
        $('.tablesorter').tablesorter();
        $('#li-deploy-result a').click();
      })
      .catch(function(err) {
        console.error('could not deploy', err);
      })
      .finally(function() {
        hidePageHeaderLoading();
      });
	}
</script>

{% endblock %}