<div class="info">
  <header class="info-header">
    <h3 class="section-header">
      <a ng-click="
        specs.info.$folded = !specs.info.$folded;
        foldEditor(['info'], specs.info.$folded);
        ">{{specs.info.title}}</a>
    </h3>
  </header>

  <div class="info-container section-content" collapse-when="specs.info.$folded">
    <div marked="specs.info.description"></div>
    <h4>Version <span>{{specs.info.version}}</span></h4>
    <div class="contact info-box" ng-if="specs.info.contact">
      <h4>Contact information</h4>
      <p ng-if="specs.info.contact.name">{{specs.info.contact.name}}</p>
      <p ng-if="specs.info.contact.email" ng-bind-html="specs.info.contact.email | linky:'_blank'"></p>
      <p ng-if="specs.info.contact.url" ng-bind-html="specs.info.contact.url | linky:'_blank'"></p>
    </div>
    <div class="terms info-box" ng-if="specs.info.termsOfService">
      <h4>Terms of service</h4>
      <p ng-bind-html="specs.info.termsOfService | linky:'_blank'"></p>
    </div>
    <div class="external-docs" ng-if="specs.externalDocs">
      <a href="{{specs.externalDocs.url}}" marked="specs.externalDocs.description"></a>
    </div>
    <div ng-if="specs.info.license" class="license info-box">
      <h4>License</h4>
      <p ng-if="!specs.info.license.url">{{specs.info.license.name}}</p>
      <p ng-if="specs.info.license.url">
        <a target="_blank" href="{{specs.info.license.url}}">{{specs.info.license.name}}</a>
      </p>
    </div>
  </div>
</div>
