<div class=“main-content”>

<div class="yaml-name-area">
    <h1 class="yaml-name">{{ yaml.name }}</h1>
    <div class="yaml-description">{{ yaml.description | markdownify }}</div>
</div>

<div class="apis">
    {% for api in yaml.apis %}
    <div class="api">
        <div class="api-name-area" id="api-{{ forloop.index }}">
            <h2 class="api-name">{{ api.name }}</h2>
            <p class="api-method api-method-{{ api.method | downcase }}">{{ api.method | upcase }}</p>
            <p class="api-url-area"><span class="api-baseurl">{{ site.api_baseurl | escape }}</span><span class="api-url">{{ yaml.baseurl | escape }}{{ api.url | escape }}</span></p>
        </div>

        <div class="api-description">{{ api.description | markdownify }}</div>

        <div class="request-response-container">
            <div class="btns">
                <div class="btn request-btn selected">Request</div>
                <div class="btn response-btn">Response</div>
            </div>
            <div class="request-response">
                <div class="request selected">
                    {% if api.params.header %}
                    <p class="param-type">Headers</p>
                    <table>
                        <thead>
                            <tr>
                                <th class="param-name-col">Field</th>
                                <th class="param-datatype-col">Type</th>
                                <th class="param-description-col">Description</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for param in api.params.header %}
                            <tr>
                                <td class="param-name-col">
                                    <p class="param-name">{{ param.name }}</p>
                                    {% if param.is_required %}
                                    <p class="param-is-required required">required</p>
                                    {% else %}
                                    <p class="param-is-required optional">optional</p>
                                    {% endif %}
                                </td>
                                <td class="param-datatype-col"><p class="param-datatype">{{ param.type }}</p></td>
                                <td class="param-description-col"><div class="param-description">{{ param.description | markdownify }}</div></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                    {% if api.params.path %}
                    <p class="param-type">Path Parameters</p>
                    <table>
                        <thead>
                            <tr>
                                <th class="param-name-col">Field</th>
                                <th class="param-datatype-col">Type</th>
                                <th class="param-description-col">Description</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for param in api.params.path %}
                            <tr>
                                <td class="param-name-col">
                                    <p class="param-name">{{ param.name }}</p>
                                    {% if param.is_required %}
                                    <p class="param-is-required required">required</p>
                                    {% else %}
                                    <p class="param-is-required optional">optional</p>
                                    {% endif %}
                                </td>
                                <td class="param-datatype-col"><p class="param-datatype">{{ param.type }}</p></td>
                                <td class="param-description-col"><div class="param-description">{{ param.description | markdownify }}</div></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                    {% if api.params.query %}
                    <p class="param-type">Query Parameters</p>
                    <table>
                        <thead>
                            <tr>
                                <th class="param-name-col">Field</th>
                                <th class="param-datatype-col">Type</th>
                                <th class="param-description-col">Description</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for param in api.params.query %}
                            <tr>
                                <td class="param-name-col">
                                    <p class="param-name">{{ param.name }}</p>
                                    {% if param.is_required %}
                                    <p class="param-is-required required">required</p>
                                    {% else %}
                                    <p class="param-is-required optional">optional</p>
                                    {% endif %}
                                </td>
                                <td class="param-datatype-col"><p class="param-datatype">{{ param.type }}</p></td>
                                <td class="param-description-col"><div class="param-description">{{ param.description | markdownify }}</div></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                    {% if api.params.body %}
                    <p class="param-type">Body Parameters</p>
                    <table>
                        <thead>
                            <tr>
                                <th class="param-name-col">Field</th>
                                <th class="param-datatype-col">Type</th>
                                <th class="param-description-col">Description</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for param in api.params.body %}
                            <tr>
                                <td class="param-name-col">
                                    <p class="param-name">{{ param.name }}</p>
                                    {% if param.is_required %}
                                    <p class="param-is-required required">required</p>
                                    {% else %}
                                    <p class="param-is-required optional">optional</p>
                                    {% endif %}
                                </td>
                                <td class="param-datatype-col"><p class="param-datatype">{{ param.type }}</p></td>
                                <td class="param-description-col"><div class="param-description">{{ param.description | markdownify }}</div></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    {% endif %}
                </div>

                <div class="response not-selected">
                    {% if api.response.success %}
                    <p class="response-result">Success</p>
                    <div class="response-success">
                        {% for item in api.response.success %}
                        <div class="response-item">
                            <p class="status-code">
                                {{ item.status_code }}
                                {% if item.status_code == 200 %}
                                : Success
                                {% endif %}
                            </p>

                            {% if item.description %}
                            <div class="response-description">{{ item.description | markdownify }}</div>
                            {% endif %}

                            {% if item.example %}
                            <pre class="response-example" id="response-example-{{ item.example }}"></pre>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}

                    {% if api.response.fail %}
                    <p class="response-result">Fail</p>
                    <div class="response-fail">
                        {% for item in api.response.fail %}
                        <div class="response-item">
                            <p class="status-code">
                                {{ item.status_code }}
                                {% if item.status_code == 400 %}
                                : Bad Request
                                {% elsif item.status_code == 401 %}
                                : Unauthorized
                                {% elsif item.status_code == 403 %}
                                : Forbidden
                                {% elsif item.status_code == 404 %}
                                : Not Found
                                {% endif %}
                            </p>

                            {% if item.description %}
                            <div class="response-description">{{ item.description | markdownify }}</div>
                            {% endif %}

                            {% if item.example %}
                            <pre class="response-example" id="response-example-{{ item.example }}"></pre>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

</div>

<script> $(“.left-sidebar-content-toc-container .content-toc-container .apis .request-response-container .btns .btn.request-btn”).click(function() {

$(this).addClass("selected");
$(this).siblings(".btn.response-btn").removeClass("selected");

var targets = $(this).parent(".btns").siblings(".request-response");

targets.children(".request").addClass("selected").removeClass("not-selected");
targets.children(".response").addClass("not-selected").removeClass("selected");

});

$(“.left-sidebar-content-toc-container .content-toc-container .apis .request-response-container .btns .btn.response-btn”).click(function() {

$(this).addClass("selected");
$(this).siblings(".btn.request-btn").removeClass("selected");

var targets = $(this).parent(".btns").siblings(".request-response");

targets.children(".request").addClass("not-selected").removeClass("selected");
targets.children(".response").addClass("selected").removeClass("not-selected");

});

$(document).ready(function() {

$(".left-sidebar-content-toc-container .content-toc-container .apis .request-response-container .request-response .response .response-example").each(function(idx, elem) {
    var filename = $(this).attr("id").split("response-example-")[1];

    $.ajax({
        type: "GET",
        url: `{{ site.baseurl }}{{ site.assets }}/api/examples/${filename}.json`,
        context: this,
        dataType: "html",
        success: function(data) {
            $(this).text(data);
            hljs.highlightBlock($(this)[0]);
        }
    })
});

}); </script>