{% extends "cacsremoteservice/views/layouts/project-view.html" %}

{% block scripts %}
<script type="text/javascript">
  codescene.views.projects.architecturalComponentEditor.init({
    projectId: {{ item.id }},
    latestAnalysisId: {% if latest-analysis-id %}{{ latest-analysis-id }}{% else %}false{% endif %},
    enableArchitecturalMatchPriority: {{ item.enable-architectural-match-priority }},
    container: $('#app-container'),
  });

  $('#architectural-component-form').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }});
</script>
{% endblock %}

{% block secondary-nav %}
{% include "cacsremoteservice/views/projects/project-header.html" with project=item tabs=tabs %}
{% endblock %}

{% block main %}
<div class="project-architectural-editor-view" id="page-body">
  <div class="architectural-component-editor" >
    {% if flash-error %}
    <div id="flash-error">{{ flash-error }}</div>
    {% else %}
    {% if flash %}<div id="flash">{{ flash  }}</div>{% endif %}  
    {% endif %}


    <div class="text-content">
      <h2>Create and edit architectural components</h2>

      <p class="back-link">
        <a href="configuration#architecture">Back to Configuration</a>
      </p>
      
      <p class="lead text-muted">
        Architectural components are groups of related files. How to
        define these components depends on the nature of your project and
        the kind of analysis you want to perform. This interface allows 
        you to define them.
        <a href='#expand-text'
           title='More about architectural component editing'
           id='expand-architectural-component-editing-text'>
          <i class='fa fa-plus-circle'></i>
        </a>
      </p>
      <div class='foldable'>
        <p>
          This interface gives you two ways to define components, either by
          selecting them in a visual representation of your project similar
          to the system maps in CodeScene analysis results, or manually in
          the form fields below. You can combine both approaches.
        </p>
        <p>
          Your changes will only be saved when you submit the form.
        </p>
        <p>
          Components are defined by one more glob patterns. Patterns
          must begin with the root repository name, even if there is only
          one repository in your project. See the documentation for more details. 
        </p>
      </div>
    </div>


    <form id="architectural-component-form" class="col-xs-12" method="post" action="">
      <div class="architectural-components-map" id="app-container">

      </div>
      <div class="buttons col-xs-4 col-xs-offset-4">
        <a class="default-button secondary"
	   href="configuration#architecture">
	  Cancel
        </a>
        <button id="architectural-components-submit" 
          data-automation-id="update-arch-components"
	        class="default-button"
	        disabled="true">
	  Submit
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}