{% extends "zerver/portico.html" %}

{% block customhead %}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ bundle('integrations-dev-panel') }}
{{ bundle('portico') }}

{% endblock %}


{% block content %}
<div class="header portico-header">
    <div class="header-main" id="top-navbar">
        <div>
            <a class="brand logo">
                <svg class="brand-logo" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
                    <g transform="translate(-297.14285,-466.64792)">
                        <circle cx="317.14285" cy="486.64792" r="19.030317"></circle>
                        <path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z"></path>
                    </g>
                </svg>
                <span>Zulip</span>
            </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 %}