<main class="raml-console-error-container raml-console-error-primary">
  <div ng-if="!loaded && !error">
    <div class="raml-console-spinner">
      <div class="raml-console-rect1"></div>
      <div class="raml-console-rect2"></div>
      <div class="raml-console-rect3"></div>
      <div class="raml-console-rect4"></div>
      <div class="raml-console-rect5"></div>
    </div>
  </div>

  <div ng-if="loaded && !error">
    <div class="raml-console-meta-button-group">
      <theme-switcher ng-if="!disableThemeSwitcher"></theme-switcher>
      <raml-client-generator ng-if="!disableRamlClientGenerator"></raml-client-generator>
    </div>

    <h1 ng-if="!disableTitle" class="raml-console-title">{{raml.title}}</h1>

    <root-documentation></root-documentation>

    <ol ng-class="{'raml-console-resources-container-no-title': disableTitle, 'raml-console-resources-container': !disableTitle}" id="raml-console-resources-container" class="raml-console-resource-list raml-console-resource-list-root raml-console-resources-resourcesCollapsed">
      <li id="raml_documentation" class="raml-console-resource-list-item raml-console-documentation-header">
        <div ng-if="proxy" align="right" class="raml-console-resource-proxy">
          <label for="raml-console-api-behind-firewall">API is behind a firewall <a href="http://www.mulesoft.org/documentation/display/current/Accessing+Your+API+Behind+a+Firewall" target="_blank">(?)</a></label>
          <input id="raml-console-api-behind-firewall" type="checkbox" ng-model="disableProxy" ng-change="updateProxyConfig(disableProxy)">
        </div>
        <header class="raml-console-resource raml-console-resource-root raml-console-clearfix">
          <span ng-if="hasResourcesWithChilds()" class="raml-console-flag raml-console-resource-heading-flag raml-console-toggle-all" ng-click="collapseAll($event, resourceList, 'resourcesCollapsed')" ng-class="{'raml-console-resources-expanded':!resourcesCollapsed}">
            <span ng-if="!resourcesCollapsed">collapse</span>
            <span ng-if="resourcesCollapsed">expand</span> all
          </span>

          <div class="raml-console-resource-path-container">
            <h2 class="raml-console-resource-section-title">
              <span class="raml-console-resource-path-active">Resources</span>
            </h2>
          </div>
          <close-button></close-button>
        </header>
      </li>

      <li id="{{generateId(resource.pathSegments)}}" class="raml-console-resource-list-item" ng-repeat="resourceGroup in raml.resourceGroups">
        <header class="raml-console-resource raml-console-resource-root raml-console-clearfix" ng-class="{ 'raml-console-is-active':showPanel }" ng-init="resource = resourceGroup[0]">
          <div class="raml-console-resource-path-container" ng-init="index=$index" ng-class="{'raml-console-resource-with-description': resource.description}">
            <button class="raml-console-resource-root-toggle" ng-class="{'raml-console-is-active': resourceList[$index]}" ng-if="resourceGroup.length > 1" ng-click="toggle($event, index, resourceList, 'resourcesCollapsed')"></button>

            <h2 class="raml-console-resource-heading raml-console-resource-heading-large">
              <a ng-if="resourceGroup.length > 1" class="raml-console-resource-path-active" ng-class="{'raml-console-resource-heading-hover':resourceGroup.length > 1}" ng-repeat='segment in resource.pathSegments' ng-click="toggle($event, index, resourceList, 'resourcesCollapsed')">{{segment.toString()}}</a>

              <a ng-if="resourceGroup.length == 1" style="cursor: default;" class="raml-console-resource-path-active" ng-repeat='segment in resource.pathSegments'>{{segment.toString()}}</a>
            </h2>

            <resource-type></resource-type>

            <span ng-if="methodInfo.is" class="raml-console-flag raml-console-resource-heading-flag raml-console-resource-trait"><b>Traits:</b> {{readTraits(methodInfo.is)}}</span>

            <span ng-hide="methodInfo.is" ng-if="resource.traits" class="raml-console-flag raml-console-resource-heading-flag"><b>Traits:</b> {{readResourceTraits(resource.traits)}}</span>

            <span class="raml-console-resource-level-description raml-console-marked-content" markdown="resource.description"></span>

          </div>
          <method-list></method-list>
          <close-button></close-button>
        </header>

        <resource-panel></resource-panel>

        <!-- Child Resources -->
        <ol class="raml-console-resource-list" ng-class="{'raml-console-is-collapsed': resourcesCollapsed}">

          <li id="{{generateId(resource.pathSegments)}}" class="raml-console-resource-list-item" ng-repeat="resource in resourceGroup" ng-if="!$first">
            <div class="raml-console-resource raml-console-clearfix" ng-class="{ 'raml-console-is-active':showPanel }">
              <div class="raml-console-resource-path-container" ng-class="{'raml-console-resource-with-description': resource.description}">
                <h3 class="raml-console-resource-heading" style="cursor: default;">
                  <span ng-repeat-start='segment in resource.pathSegments' ng-if="!$last">{{segment.toString()}}</span><span ng-repeat-end ng-if="$last" class="raml-console-resource-path-active">{{segment.toString()}}</span>
                </h3>

                <resource-type></resource-type>
                <span ng-if="methodInfo.is" class="raml-console-flag raml-console-resource-heading-flag raml-console-resource-trait"><b>Traits:</b> {{readTraits(methodInfo.is)}}</span>

                <span ng-hide="methodInfo.is" ng-if="resource.traits" class="raml-console-flag raml-console-resource-heading-flag"><b>Traits:</b> {{readResourceTraits(resource.traits)}}</span>

                <span class="raml-console-resource-level-description raml-console-marked-content" markdown="resource.description"></span>
              </div>

              <method-list></method-list>
              <close-button></close-button>
            </div>

            <resource-panel></resource-panel>
          </li>
        </ol>

      </li>
    </ol>
  </div>

  <div ng-if="loaded && error">
    <div class="raml-console-initializer-container raml-console-initializer-primary">
      <h1 class="raml-console-title">RAML Console</h1>

      <section>
        <header class="raml-console-initializer-row raml-console-initializer-subheader">
          <h4 class="raml-console-initializer-subhead">Error while parsing</h4>
        </header>

        <div class="raml-console-initializer-row">
          <p class="raml-console-initializer-input-container" style="height: 550px;">
            <textarea id="raml" ui-codemirror="{
              lineNumbers: true,
              lineWrapping : false,
              tabSize: 2,
              mode: 'yaml',
              gutters: ['CodeMirror-lint-markers'],
              lint: true,
              theme : 'raml-console'
            }" ng-model="raml"></textarea>
          </p>
        </div>
      </section>
    </div>

    {{raml}}
  </div>
</main>
