<div class="main-header">

  <a href="http://swagger.io" target="_blank" class="logo" ng-if="!showHeaderBranding()"></a>

  <div ng-include="'templates/branding-left.html'" ng-if="showHeaderBranding()" class="branding-3rdparty"></div>

  <section class="menu-bar">
    <div class="file dropdown" ng-if="showFileMenu()">
      <button
        class="btn btn-default dropdown-toggle"
        ng-click="onFileMenuOpen()"
        data-toggle="dropdown"
        id="fileMenu">
        <span>File</span>
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu">
        <li>
          <a dropdown-toggle ng-click="newProject()" tabindex="-1" track-event="file new"><i class="fa fa-file-text"></i>&nbsp;<span>New</span></a>
        </li>
        <li>
          <a dropdown-toggle id="open-example" ng-click="openExamples()" tabindex="-1" track-event="file open-example"><i class="fa fa-folder-open highlighted"></i>&nbsp;<span>Open Example&hellip;</span></a>
        </li>
        <li class="divider"></li>
        <li>
          <a dropdown-toggle ng-click="openPasteJSON()" tabindex="-1" track-event="file paste-json"><i class="fa fa-clipboard"></i>&nbsp;<span>Paste JSON&hellip;</span></a>
        </li>
        <li>
          <a dropdown-toggle ng-click="openImportUrl()" tabindex="-1" track-event="file import url"><i class="fa fa-link"></i>&nbsp;<span>Import URL&hellip;</span></a>
        </li>
        <li>
          <a dropdown-toggle ng-click="openImportFile()" tabindex="-1" track-event="file import file"><i class="fa fa-file highlighted"></i>&nbsp;<span>Import File&hellip;</span></a>
        </li>
        <li class="divider"></li>
        <li>
          <a download="swagger.yaml" data-downloadurl="{{yamlDownloadUrl}}"
            href="{{yamlDownloadHref}}" tabindex="-1" track-event="file download yaml"><i class="fa fa-download"></i>&nbsp;<span>Download YAML</span></a>
        </li>
        <li>
          <a download="swagger.json" downloadUrl="{{jsonDownloadUrl}}"
            href="{{jsonDownloadHref}}" tabindex="-1" track-event="file download json"><i class="fa fa-download"></i>&nbsp;<span>Download JSON</span></a>
        </li>
      </ul>
    </div>

    <div class="preferences dropdown">
      <button id="preferences" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
        <span>Preferences</span>
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu">
        <li>
          <a class="font-size">
            <i class="fa fa-font"></i>
            Font Size&nbsp;&nbsp;&nbsp;
            <span>
              <span ng-click="adjustFontSize(1)" stop-event class="adjust" track-event="preferences font+">+</span><span ng-click="adjustFontSize(-1)" stop-event class="adjust" track-event="preferences font-">–</span>
            </span>
          </a>
        </li>
        <li>
          <a dropdown-toggle ng-click="openEditorPreferences()" tabindex="-1" track-event="preferences settings">
            <i class="fa fa-cogs"></i>
            <span>Editor Settings</span>
          </a>
        </li>
        <li>
          <a dropdown-toggle ng-click="resetSettings()" tabindex="-1" track-event="preferences reset-settings">
            <i class="fa fa-undo"></i>
            <span>Reset Editor Settings</span>
          </a>
        </li>
        <li class="divider"></li>
        <li>
          <a dropdown-toggle tabindex="-1" ng-click="openPreferences()" track-event="preferences preferences">
            <i class="fa fa-wrench highlighted"></i>
            <span>Preferences&hellip;</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Handling of Code Generator service availability issues -->
    <span
      class=" text-danger dropdown-toggle"
      ng-if="serversNotAvailable">
        Server code generator is unreachable!
    </span>
    <span
      class=" text-danger dropdown-toggle"
      ng-if="clientsNotAvailable">
        Client code generator is unreachable!
    </span>

    <div class="dropdown" ng-if="servers && servers.length && !disableCodeGen">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="ServerMenu">
        <span>Generate Server</span>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li ng-repeat="server in ::servers track by $index">
          <a dropdown-toggle tabindex="-1" ng-click="getSDK('server', server)" track-event="generate-server {{server}}">
            <i class="fa fa-download"></i>&nbsp;
            <span class="name">{{capitalizeGeneratorName(server)}}</span>
          </a>
        </li>
      </ul>
    </div>

    <div class="code-gen dropdown" ng-if="clients && clients.length && !disableCodeGen">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="ClientMenu">
        <span>Generate Client</span>
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu">
        <li ng-repeat="client in ::clients track by $index">
          <a dropdown-toggle tabindex="-1" ng-click="getSDK('client', client)" track-event="generate-client {{client}}">
            <i class="fa fa-download"></i>&nbsp;
            <span class="name">{{capitalizeGeneratorName(client)}}</span>
          </a>
        </li>
      </ul>
    </div>

    <div class="help dropdown">
      <button class="dropdown-icon btn btn-default dropdown-toggle" id="helpMenu" data-toggle="dropdown">
        <span>Help</span>
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu">
        <li>
          <a tabindex="-1" href="https://github.com/swagger-api/swagger-spec/blob/master/versions/2.0.md" target="_blank">
            <i class="fa fa-align-justify"></i>&nbsp;
            <span>Swagger 2.0 Specs</span>
          </a>
        </li>
        <li>
          <a tabindex="-1" href="http://swagger.io/" target="_blank">
            <i class="fa fa-share-square-o"></i>&nbsp;
            <span>Swagger Website</span>
          </a>
        </li>
        <li>
          <a dropdown-toggle tabindex="-1" ng-click="openAbout()">
            <i class="fa fa-info-circle"></i>&nbsp;
            <span>About Swagger Editor</span>
          </a>
        </li>
        <li class="divider"></li>
        <li>
          <a href="https://github.com/swagger-api/swagger-editor/issues/new?labels=From%20Editor" target="_blank">
            <i class="fa fa-bug highlighted"></i>&nbsp;
            <span>Report A Bug</span>
          </a>
        </li>
        <li class="divider"></li>
        <li>
          <a dropdown-toggle ng-click="toggleAboutEditor(true)" tabindex="-1">
            <i class="fa no-icon"></i>&nbsp;
            <span>Show Introduction Help</span>
          </a>
        </li>
      </ul>
    </div>
  </section>

  <section class="status-bar">
    <div class="status {{statusClass}}" ng-if="status">
      <i ng-if="statusClass == 'working'" class="fa fa-spinner fa-pulse"></i>
      <i ng-if="statusClass == 'error'" class="fa fa fa-times"></i>
      <i ng-if="statusClass == 'success'" class="fa fa-check"></i>
      <span>{{status}}</span>
    </div>
    <div class="brandRight" ng-include="'templates/branding-right.html'" ng-if="showHeaderBranding()"></div>
  </section>
</div>
