{% import "lib/githubLinks.html" as github -%}
{% import "lib/paramList.html" as params -%}
{% extends 'class.template.html' -%}

{% block annotations %}
{% endblock %}

{% block additional -%}

{%- if doc.directiveOptions.selector.split(',').length %}
div(layout="row" layout-xs="column" class="row-margin ng-cloak")
  div(flex="20" flex-xs="100")
    h2(class="h2-api-docs") Selectors
  div(flex="80" flex-xs="100")
    {% for selector in doc.directiveOptions.selector.split(',') %}
    p.selector
      code {$ selector $}
    {% endfor %}
{% endif %}

{% if doc.outputs %}
div(layout="row" layout-xs="column" class="row-margin ng-cloak")
  div(flex="20" flex-xs="100")
    h2(class="h2-api-docs") Outputs
  div(flex="80" flex-xs="100")
  {% for binding, property in doc.outputs %}
    div(class="code-margin")
      code {$ property.bindingName $}
      |  bound to 
      code {$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}
    :marked
{$ event.memberDoc.description | indentForMarkdown(6) | trimBlankLines $}
  {% endfor %}
{% endif %}

{% if doc.inputs %}
div(layout="row" layout-xs="column" class="row-margin ng-cloak")
  div(flex="20" flex-xs="100")
    h2(class="h2-api-docs") Inputs
  div(flex="80" flex-xs="100")
    {% for binding, property in doc.inputs %}
    div(class="code-margin")
      code {$ property.bindingName $}
      |  bound to 
      code {$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}
    :marked
{$ event.memberDoc.description | indentForMarkdown(4) | trimBlankLines $}
    {% endfor %}
{% endif %}

{%- if doc.directiveOptions.exportAs %}
div(layout="row" layout-xs="column" class="row-margin ng-cloak")
  div(flex="20" flex-xs="100")
    h2(class="h2-api-docs") Exported as
  div(flex="80" flex-xs="100")
    p.input
      code {$ doc.directiveOptions.exportAs $}
{% endif %}
{% endblock %}