{% extends "zerver/portico.html" %}
{% set entrypoint = "integrations-dev-panel" %}

{% block customhead %}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock %}


{% block content %}
<div class="header portico-header">
    <div class="header-main top-navbar">
        <div>
            <a class="brand logo">
                <svg role="img" aria-label="{{ _('Zulip') }}" xmlns="http://www.w3.org/2000/svg" viewBox="68.96 55.62 1742.12 450.43" height="25">
                    <path fill="hsl(0, 0%, 27%)" d="M473.09 122.97c0 22.69-10.19 42.85-25.72 55.08L296.61 312.69c-2.8 2.4-6.44-1.47-4.42-4.7l55.3-110.72c1.55-3.1-.46-6.91-3.64-6.91H129.36c-33.22 0-60.4-30.32-60.4-67.37 0-37.06 27.18-67.37 60.4-67.37h283.33c33.22-.02 60.4 30.3 60.4 67.35zM129.36 506.05h283.33c33.22 0 60.4-30.32 60.4-67.37 0-37.06-27.18-67.37-60.4-67.37H198.2c-3.18 0-5.19-3.81-3.64-6.91l55.3-110.72c2.02-3.23-1.62-7.1-4.42-4.7L94.68 383.6c-15.53 12.22-25.72 32.39-25.72 55.08 0 37.05 27.18 67.37 60.4 67.37zm522.5-124.15l124.78-179.6v-1.56H663.52v-48.98h190.09v34.21L731.55 363.24v1.56h124.01v48.98h-203.7V381.9zm338.98-230.14V302.6c0 45.09 17.1 68.03 47.43 68.03 31.1 0 48.2-21.77 48.2-68.03V151.76h59.09V298.7c0 80.86-40.82 119.34-109.24 119.34-66.09 0-104.96-36.54-104.96-120.12V151.76h59.48zm244.91 0h59.48v212.25h104.18v49.76h-163.66V151.76zm297 0v262.01h-59.48V151.76h59.48zm90.18 3.5c18.27-3.11 43.93-5.44 80.08-5.44 36.54 0 62.59 7 80.08 20.99 16.72 13.22 27.99 34.99 27.99 60.64 0 25.66-8.55 47.43-24.1 62.2-20.21 19.05-50.15 27.6-85.13 27.6-7.77 0-14.77-.39-20.21-1.17v93.69h-58.7V155.26zm58.7 118.96c5.05 1.17 11.27 1.55 19.83 1.55 31.49 0 50.92-15.94 50.92-42.76 0-24.1-16.72-38.49-46.26-38.49-12.05 0-20.21 1.17-24.49 2.33v77.37z"/>
                </svg>
            </a>
        </div>

        <div class="centerpiece">Integrations developer panel</div>

        <div class="top-links">
            <a href="/">Go to Zulip</a>
        </div>

    </div>
</div>

<div class="pad-small"></div>

<div id="dev-panel">
    <div class="row1">
        <div>
            <label for="bot_name"><b>Bot</b></label>
            <select id="bot_name">
                <option value=""></option>
                {% for bot in bots %}
                <option value="{{ bot.api_key }}"> {{ bot.full_name }} </option>
                {% endfor %}
            </select>
        </div>

        <div>
            <label><b>Integration</b></label>
            <select id="integration_name">
                <option value=""></option>
                {% for integration in integrations %}
                <option value="{{ integration }}"> {{ integration }} </option>
                {% endfor %}
            </select>
        </div>

        <div>
            <label for="fixture_name"><b>Fixture</b></label>
            <select id="fixture_name"></select>
        </div>

        <div>
            <label class="optional"><b>Stream</b></label>
            <input id="stream_name" type="text" />
        </div>

        <div>
            <label class="optional"><b>Topic</b></label>
            <input id="topic_name" type="text" />
        </div>
    </div>

    <br>

    <div class="row2">
        <label for="URL"><b>URL</b>  (Automatically Generated)</label>
        <input id="URL" type="text" />
    </div>

    <br>

    <div class="row3">
        <label for="custom_http_headers"><b>Custom HTTP Headers</b></label>
        <textarea id="custom_http_headers"></textarea>
    </div>

    <br>

    <div class="row4">
        <div class="col1">
            <div class="inline">
                <label for="fixture_body"><b>Fixture Body</b></label>
                <span id="results_notice"></span>
            </div>
            <textarea id="fixture_body"></textarea>
            <div class="buttons">
                <button id="send_all_fixtures_button">Send All</button>
                <button id="send_fixture_button">Send!</button>
            </div>
        </div>
        <div class="col1">
            <label for="idp-results"><b>Results</b></label>
            <textarea id="idp-results" readonly></textarea>
        </div>
    </div>

</div>

<div class="pad-small"></div>
<input id="csrftoken" type="hidden" value="{{ csrf_token }}">

{% endblock %}