<li class="{{ data.method|lower }} operation" id="{{ data.id }}">
    <div class="heading toggler{% if data.deprecated %} deprecated{% endif %}" data-href="#{{ data.id }}">
        <h3>
            <span class="http_method">
                <i>{{ data.method|upper }}</i>
            </span>

            {% if data.deprecated %}
            <span class="deprecated">
                <i>DEPRECATED</i>
            </span>
            {% endif %}

            {% if data.https %}
                <span class="icon lock" title="HTTPS"></span>
            {% endif %}
            {% if data.authentication %}
                <span class="icon keys" title="Needs {{ data.authenticationRoles|length > 0 ? data.authenticationRoles|join(', ') : 'authentication' }}"></span>
            {% endif %}

            <span class="path">
                {% if data.host is defined -%}
                    {{ data.https ? 'https://' : 'http://' -}}
                    {{ data.host -}}
                {% endif -%}
                {{ data.uri }}
            </span>
           {% if data.tags is defined %}
                {% for tag, color_code in data.tags %}
                    <span class="tag" {% if color_code is defined and color_code is not empty %}style="background-color:{{ color_code }};"{% endif %}>{{ tag }}</span>
                {% endfor %}
            {%  endif %}
        </h3>
        <ul class="options">
            {% if data.description is defined %}
                <li>{{ data.description }}</li>
            {% endif %}
        </ul>
    </div>

    <div class="content" style="display: {% if displayContent is defined and displayContent == true %}display{% else %}none{% endif %};">
        <ul class="tabs">
            {% if enableSandbox %}
                <li class="selected" data-pane="content">Documentation</li>
                <li data-pane="sandbox">Sandbox</li>
            {% endif %}
        </ul>

        <div class="panes">
            <div class="pane content selected">
            {% if data.documentation is defined and data.documentation is not empty %}
                <h4>Documentation</h4>
                <div>{{ data.documentation|extra_markdown }}</div>
            {% endif %}

            {% if data.link is defined and data.link is not empty %}
                <h4>Link</h4>
                <div><a href="{{ data.link }}" target="_blank">{{ data.link }}</a></div>
            {% endif %}

            {%- if data.authentication and data.authenticationRoles|length > 0 -%}
                <h4>Authorization roles:</h4>
                <div>
                    <ul>
                        {% for role in data.authenticationRoles %}
                            <li>{{- role -}}</li>
                        {% endfor %}
                    </ul>
                </div>
            {%- endif -%}

            {% if data.requirements is defined and data.requirements is not empty %}
                <h4>Requirements</h4>
                <table class="fullwidth">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Requirement</th>
                            <th>Type</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for name, infos in data.requirements %}
                            <tr>
                                <td>{{ name }}</td>
                                <td>{{ infos.requirement is defined ? infos.requirement : ''}}</td>
                                <td>{{ infos.dataType is defined ? infos.dataType : ''}}</td>
                                <td>{{ infos.description is defined ? infos.description : ''}}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}

            {% if data.filters is defined and data.filters is not empty %}
                <h4>Filters</h4>
                <table class="fullwidth">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Information</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for name, infos in data.filters %}
                        <tr>
                            <td>{{ name }}</td>
                            <td>
                                <table>
                                {% for key, value in infos %}
                                    <tr>
                                        <td>{{ key|title }}</td>
                                        <td>{{ value|json_encode(constant('JSON_UNESCAPED_UNICODE'))|replace({'\\\\': '\\'})|trim('"') }}</td>
                                    </tr>
                                {% endfor %}
                                </table>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endif %}

            {% if data.parameters is defined and data.parameters is not empty %}
                <section class="block" id="parameters">
                    <div class="block-header">
                        <h4>Parameters</h4>
                        <h5>Expect json with next structure:</h5>
                    </div>
                    <br>
                    <div class="block-content">
                        {%- include 'NelmioApiDocBundle::parameters.html.twig' with {
                        parameters: data.parameters
                        } -%}
                    </div>
                </section>
            {% endif %}


            {% if data.headers is defined and data.headers is not empty %}
                <h4>Headers</h4>
                <table class="fullwidth">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Required?</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for name, infos in data.headers %}
                        <tr>
                            <td>{{ name }}</td>
                            <td>{{ infos.required is defined and infos.required == 'true' ? 'true' : 'false'}}</td>
                            <td>{{ infos.description is defined ? infos.description|trans : ''}}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endif %}

            {% if data.parsedResponseMap is defined and data.parsedResponseMap is not empty %}
                <h4>Return</h4>
                {% for status_code, response in data.parsedResponseMap %}

                    <h4>
                        {{ status_code }}
                        {% if data.statusCodes[status_code] is defined %}
                            - {{ data.statusCodes[status_code]|join(', ') }}
                        {% endif %}
                    </h4>
                    {%- include 'NelmioApiDocBundle::parameters.html.twig' with {
                        parameters: response.model
                    } -%}
                {% endfor %}
            {% endif %}

            {% if data.statusCodes is defined and data.statusCodes is not empty %}
                <h4>Status Codes</h4>
                <table class="fullwidth">
                    <thead>
                    <tr>
                        <th>Status Code</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for status_code, descriptions in data.statusCodes %}
                        <tr>
                            <td><a href="http://en.wikipedia.org/wiki/HTTP_{{ status_code }}" target="_blank">{{ status_code }}</a></td>
                            <td>
                                <ul>
                                    {% for description in descriptions %}
                                        <li>{{ description }}</li>
                                    {%  endfor %}
                                </ul>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endif %}

            {% if data.cache is defined and data.cache is not empty %}
                <h4>Cache</h4>
                <div>{{ data.cache }}s</div>
            {% endif %}

            </div>

            {% if enableSandbox %}
                <div class="pane sandbox">
                    {% if app.request is not null and data.https and app.request.secure != data.https %}
                    Please reload the documentation using the scheme {% if data.https %}HTTPS{% else %}HTTP{% endif %} if you want to use the sandbox.
                    {% else %}
                        <form method="" action="{% if data.host is defined %}{{ data.https ? 'https://' : 'http://' }}{{ data.host }}{% endif %}{{ data.uri }}">
                            <fieldset class="parameters">
                                <legend>Input</legend>
                                {% if data.requirements is defined %}
                                    <h4>Requirements</h4>
                                    {% for name, infos in data.requirements %}
                                        <p class="tuple">
                                            <input type="text" class="key" value="{{ name }}" placeholder="Key" />
                                            <span>=</span>
                                            <input type="text" class="value" placeholder="{% if infos.description is defined %}{{ infos.description }}{% else %}Value{% endif %}" {% if infos.default is defined %} value="{{ infos.default }}" {% endif %}/> <span class="remove">-</span>
                                        </p>
                                    {% endfor %}
                                {% endif %}
                                {% if data.filters is defined %}
                                    <h4>Filters</h4>
                                    {% for name, infos in data.filters %}
                                        <p class="tuple">
                                            <input type="text" class="key" value="{{ name }}" placeholder="Key" />
                                            <span>=</span>
                                            <input type="text" class="value" placeholder="{% if infos.description is defined %}{{ infos.description }}{% else %}Value{% endif %}" {% if infos.default is defined %} value="{{ infos.default }}" {% endif %}/> <span class="remove">-</span>
                                        </p>
                                    {% endfor %}
                                {% endif %}
                                {% if data.parameters is defined %}
                                    <h4>Parameters</h4>
                                    {% for name, infos in data.parameters %}
                                    {% if not infos.readonly %}
                                        <p class="tuple" data-dataType="{% if infos.dataType %}{{ infos.dataType }}{% endif %}" data-format="{% if infos.format %}{{ infos.format }} {% endif %}" data-description="{% if infos.description %}{{ infos.description }}{% endif %}">
                                            <input type="text" class="key" value="{{ name }}" placeholder="Key" />
                                            <span>=</span>
                                            <select class="tuple_type">
                                                <option value="">Type</option>
                                                <option value="string">String</option>
                                                <option value="boolean">Boolean</option>
                                                <option value="file">File</option>
                                                <option value="textarea">Textarea</option>
                                            </select>
                                            <input type="text" class="value" placeholder="{% if infos.dataType %}[{{ infos.dataType }}] {% endif %}{% if infos.format %}{{ infos.format }}{% endif %}{% if infos.description %}{{ infos.description }}{% else %}Value{% endif %}" {% if infos.default is defined %} value="{{ infos.default }}" {% endif %}/> <span class="remove">-</span>
                                        </p>
                                    {% endif %}
                                    {% endfor %}
                                    <button type="button" class="add_parameter">New parameter</button>
                                {% endif %}

                            </fieldset>

                            <fieldset class="headers">
                                {% set methods = data.method|upper|split('|') %}
                                {% if methods|length > 1 %}
                                    <legend>Method</legend>
                                    <select name="header_method">
                                    {% for method in methods %}
                                        <option value="{{ method }}">{{ method }}</option>
                                    {% endfor %}
                                    </select>
                                {% else %}
                                    <input type="hidden" name="header_method" value="{{ methods|join }}" />
                                {% endif %}

                                <legend>Headers</legend>

                                {% if acceptType %}
                                    <p class="tuple">
                                        <input type="text" class="key" value="Accept" />
                                        <span>=</span>
                                        <input type="text" class="value" value="{{ acceptType }}" /> <span class="remove">-</span>
                                    </p>
                                {% endif %}

                                {% if data.headers is defined %}

                                    {% for name, infos in data.headers %}
                                        <p class="tuple">
                                            <input type="text" class="key" value="{{ name }}" />
                                            <span>=</span>
                                            <input type="text" class="value" value="{% if infos.default is defined %}{{ infos.default }}{% endif %}" placeholder="Value" /> <span class="remove">-</span>
                                        </p>
                                    {% endfor %}

                                {% endif %}

                                <p class="tuple">
                                    <input type="text" class="key" placeholder="Key" />
                                    <span>=</span>
                                    <input type="text" class="value" placeholder="Value" /> <span class="remove">-</span>
                                </p>

                                <button type="button" class="add_header">New header</button>
                            </fieldset>

                            <fieldset class="request-content">
                                <legend>Content</legend>

                                <textarea class="content" placeholder="Content set here will override the parameters that do not match the url"></textarea>

                                <p class="tuple">
                                    <input type="text" class="key content-type" value="Content-Type" disabled="disabled" />
                                    <span>=</span>
                                    <input type="text" class="value" placeholder="Value" />
                                    <button  type="button" class="set-content-type">Set header</button> <small>Replaces header if set</small>
                                </p>
                            </fieldset>

                            <div class="buttons">
                                <input type="submit" value="Try!" />
                            </div>
                        </form>

                        <script type="text/x-tmpl" class="parameters_tuple_template">
                        <p class="tuple">
                            <input type="text" class="key" placeholder="Key" />
                            <span>=</span>
                            <select class="tuple_type">
                                                <option value="">Type</option>
                                                <option value="string">String</option>
                                                <option value="boolean">Boolean</option>
                                                <option value="file">File</option>
                                                <option value="textarea">Textarea</option>
                                            </select>
                            <input type="text" class="value" placeholder="Value" /> <span class="remove">-</span>
                        </p>
                        </script>

                        <script type="text/x-tmpl" class="headers_tuple_template">
                        <p class="tuple">
                            <input type="text" class="key" placeholder="Key" />
                            <span>=</span>
                            <input type="text" class="value" placeholder="Value" /> <span class="remove">-</span>
                        </p>
                        </script>


                        <div class="result">
                            <h4>Request URL</h4>
                            <pre class="url"></pre>

                            <h4 class="request-body-header">Request body</h4>
                            <pre class="request-body"></pre>

                            <h4>Response Headers&nbsp;<small>[<a href="" class="to-expand">Expand</a>]</small>&nbsp;<small class="profiler">[<a href="" class="profiler-link" target="_blank">Profiler</a>]</small></h4>
                            <pre class="headers to-expand"></pre>

                            <h4>Response Body&nbsp;<small>[<a href="" class="to-raw">Raw</a>]</small></h4>
                            <pre class="response prettyprint"></pre>

                            <h4>Curl Command Line</h4>
                            <pre class="curl-command"></pre>
                        </div>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
</li>
