{% from "./partials/type.html" import type %}

{% macro schemaProp(prop, propName, open=false, root=false, odd=false, specialName=false, required=false) %}

<div class="{% if odd %}bg-grey-lighter{% else %}bg-grey-lightest{% endif %} {% if not root %}pl-8 pr-8{% endif %} rounded">
  <div class="{% if open %}is-open{% endif %}">
    <div class="{% if prop | isExpandable %}js-prop cursor-pointer py-2{% endif %} flex property">
      <div class="pr-4" style="margin-top:-2px; min-width: 25%;">
        <span class="text-sm{% if specialName %} italic text-grey{% endif %}{% if prop.deprecated() %} line-through{% endif %}" style="word-break: break-word;">{{propName}}</span>
        {% if prop | isExpandable %}
        <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
          xmlns="http://www.w3.org/2000/svg" y="0">
          <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
        </svg>
        {% endif %}
        {% if required and required is not none%}
          <div class="text-red-dark text-xs">required</div>
        {% endif %}
        {% if prop.deprecated() %}
          <div class="text-red-dark text-xs">deprecated</div>
        {% endif %}
      </div>

      <div>
        <div class="capitalize text-sm text-teal font-bold">
          {{ type(prop) }}
          {% if prop.anyOf() %}anyOf{% endif %}
          {% if prop.oneOf() %}oneOf{% endif %}
          {% if prop.allOf() %}allOf{% endif %}
          <div class="inline-block">
            {% if prop.format() %}
              <span class="bg-yellow-dark font-bold no-underline text-black rounded lowercase ml-2"
                style="height: 20px;font-size: 11px;padding: 3px;">{{prop.format()}}</span>
            {% endif %}
            {% if prop.minimum() is not none %}
              <span class="bg-purple-dark font-bold no-underline text-white rounded lowercase ml-2"
                style="height: 20px;font-size: 11px;padding: 3px;" title="At least {{prop.minimum()}}">>= {{prop.minimum()}}</span>
            {% endif %}
            {% if prop.exclusiveMinimum() is not none %}
              <span class="bg-purple-dark font-bold no-underline text-white rounded lowercase ml-2"
                style="height: 20px;font-size: 11px;padding: 3px;" title="Greater than {{prop.exclusiveMinimum()}}">> {{prop.exclusiveMinimum()}}</span>
            {% endif %}
            {% if prop.maximum() is not none %}
              <span class="bg-purple-dark font-bold no-underline text-white rounded lowercase ml-2"
                style="height: 20px;font-size: 11px;padding: 3px;" title="At most {{prop.maximum()}}"><= {{prop.maximum()}}</span>
            {% endif %}
            {% if prop.exclusiveMaximum() is not none %}
              <span class="bg-purple-dark font-bold no-underline text-white rounded lowercase ml-2"
                style="height: 20px;font-size: 11px;padding: 3px;" title="Less than {{prop.exclusiveMaximum()}}">< {{prop.exclusiveMaximum()}}</span>
            {% endif %}
            {% if prop.minItems() is not none %}
              <span class="bg-purple-dark font-bold no-underline text-white rounded lowercase ml-2"
                style="height: 20px;font-size: 11px;padding: 3px;">>= {{prop.minItems()}} items</span>
            {% endif %}
            {% if prop.maxItems() is not none %}
              <span class="bg-purple-dark font-bold no-underline text-white rounded lowercase ml-2"
                style="height: 20px;font-size: 11px;padding: 3px;"><= {{prop.maxItems()}} items</span>
            {% endif %}
            {% if prop.maxLength() is not none %}
              <span class="bg-purple-dark font-bold no-underline text-white rounded lowercase ml-2"
                style="height: 20px;font-size: 11px;padding: 3px;">length <= {{prop.maxLength()}}</span>
            {% endif %}
            {% if prop.minLength() is not none %}
            <span class="bg-purple-dark font-bold no-underline text-white rounded lowercase ml-2"
                  style="height: 20px;font-size: 11px;padding: 3px;">length >= {{prop.minLength()}}</span>
            {% endif %}
            {% if prop.pattern() is not none %}
            <span class="bg-purple-dark font-bold no-underline text-white rounded normal-case ml-2"
                  style="height: 20px;font-size: 11px;padding: 3px;">must match {{prop.pattern()}}</span>
            {% endif %}
            {% if prop.uniqueItems() %}
              <span class="bg-red-dark font-bold no-underline text-white rounded lowercase ml-2"
                style="height: 20px;font-size: 11px;padding: 3px;" title="Array items must be unique">Unique</span>
            {% endif %}
          </div>
        </div>

        {% if prop.description() %}
          <div class="text-sm markdown">{{ prop.description() | markdown2html | safe }}</div>
        {% endif %}
        {% if prop.default() is not none %}
          <div class="text-xs">Default: {{prop.default() | dump}}</div>
        {% endif %}
        {% if prop.const() is not none %}
          <div class="text-xs">Const: {{prop.const() | dump}}</div>
        {% endif %}
        {% if prop.enum() %}
          <div class="text-xs">
            Enum:
            {% for value in prop.enum() %}
              <span class="border text-orange rounded ml-1 py-0 px-2">{{value | dump(2) | safe }}</span>
            {% endfor %}
          </div>
        {% endif %}
        {% if prop.examples() %}
          <div class="text-xs">
            Examples:
            {% for value in prop.examples() %}
              <span class="border text-orange rounded ml-1 py-0 px-2">{{value | dump(2) | safe }}</span>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>

    {% if prop | isExpandable %}
      <div class="children {% if odd %}bg-grey-lightest{% else %}bg-grey-lighter{% endif %} py-4 rounded">
        {% if prop.properties() %}
          {% for pName, p in prop.properties() %}
            {% if prop.required() and pName in prop.required() %}
              {{ schemaProp(p, pName, odd=(not odd), required=true) }}
            {% else %}
              {{ schemaProp(p, pName, odd=(not odd), required=false) }}
            {% endif %}
          {% endfor %}
        {% endif %}

        {% set extensions = prop | nonParserExtensions %}
        {% if extensions %}
          <p class="pl-6 mb-2 mt-4 text-sm font-bold text-grey-darker">Specification Extensions:</p>
          {% for extensionName, extensionValue in extensions %}
              <div class="{% if odd %}bg-grey-lightest{% else %}bg-grey-lighter{% endif %} pl-6">
              {% if extensionValue | isObject  %}
              <div class="{% if open %}is-open{% endif %}">
                <div class="js-prop cursor-pointer py-2 property">
                  <div class="pr-4" style="margin-top:-2px; min-width: 25%;">
                    <span class="text-sm" style="word-break: break-word;">{{ extensionName }}</span>
                    <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
                      xmlns="http://www.w3.org/2000/svg" y="0">
                      <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
                    </svg>
                  </div>
                </div>
                <div class="children">
                  <div class="{% if odd %}bg-grey-lighter{% else %}bg-grey-lightest{% endif %} {% if not root %}pl-8 pr-8{% endif %} rounded">
                    <pre class="text-sm">{{ extensionValue | dump(2) }}</pre>
                  </div>
                </div>
              </div>
              {% else %}
                  <div class="text-sm">{{ extensionName }}: {{ extensionValue }}</div>
              {% endif %}
              </div>
            {% endfor %}
        {% endif %}

        {% if prop.type() == 'array' %}
          {% if prop.items() %}
            <p class="pl-6 mb-2 text-xs font-bold uppercase text-grey-darker">Items:</p>
            {% if prop.items() | isArray %}
              {% for it in prop.items() %}
              {{ schemaProp(it, loop.index0, odd=(not odd), required=prop.required()|boolean) }}
              {% endfor %}
            {% else %}
              {{ schemaProp(prop.items(), '0', odd=(not odd)) }}
            {% endif %}
          {% endif %}

          {% if prop.additionalItems() is true or prop.additionalItems() is none %}
            <p class="pl-6 mb-2 mt-4 text-xs text-grey-darker">Additional items are allowed.</p>
          {% elif prop.additionalItems() is false and prop.additionalItems() is not none %}
            <p class="pl-6 mb-2 mt-4 text-xs text-grey-darker">Additional items are NOT allowed.</p>
          {% else %}
            <p class="pl-6 mb-2 mt-4 text-xs font-bold text-grey-darker">Additional Items:</p>
            <div class="{% if odd %}bg-grey-lightest{% else %}bg-grey-lighter{% endif %} pl-6">
              {{ schemaProp(prop.additionalItems(), '', odd=(not odd)) }}
            </div>
          {% endif %}
        {% endif %}

        {% if prop.type() == 'object' %}
          {% if prop.additionalProperties() is true or prop.additionalProperties() is none %}
            <p class="pl-6 mb-2 mt-4 text-xs text-grey-darker">Additional properties are allowed.</p>
          {% elif prop.additionalProperties() is false and prop.additionalProperties() is not none %}
            <p class="pl-6 mb-2 mt-4 text-xs text-grey-darker">Additional properties are <strong>NOT</strong> allowed.</p>
          {% else %}
            <p class="pl-6 mb-2 mt-4 text-xs font-bold text-grey-darker">Additional properties must adhere to the following schema:</p>
            <div class="{% if odd %}bg-grey-lightest{% else %}bg-grey-lighter{% endif %} pl-6">
              {{ schemaProp(prop.additionalProperties(), '(property name)', odd=(not odd), open=false, specialName=true) }}
            </div>
          {% endif %}
        {% endif %}

        {% if prop.oneOf() %}
          {% for p in prop.oneOf() %}
            {{ schemaProp(p, loop.index0, odd=(not odd)) }}
          {% endfor %}
        {% endif %}

        {% if prop.anyOf() %}
          {% for p in prop.anyOf() %}
            {{ schemaProp(p, loop.index0, odd=(not odd)) }}
          {% endfor %}
        {% endif %}

        {% if prop.allOf() %}
          {% for p in prop.allOf() %}
            {{ schemaProp(p, loop.index0, odd=(not odd)) }}
          {% endfor %}
        {% endif %}
      </div>
    {% endif %}
  </div>
</div>

{% endmacro %}
