{{ template "before.html" . }}

<script src="res/create.js"></script>

<p>Fill the form below and click on Submit.</p>

<form action="#" onsubmit="setBot();return false">
    <table>
        <tr>
            <td class="form-l">
                <span style="question" uk-icon="question" uk-tooltip="The token @BotFather gave you."></span>
            </td><td class="form-r">
            <input id="token" type="text" placeholder="Bot token" required/>
        </td>
        </tr>
        <tr>
            <td class="form-l">
                <span style="question" uk-icon="question" uk-tooltip="Your bot will send this message to whoever starts it."></span>
            </td><td class="form-r">
            <textarea id="text" placeholder="Reply message (HTML is supported)" rows="5"></textarea>
        </td>
        </tr>
    </table>
    <input type="checkbox" id="tec" name="tec" style="width: 5%;" required> <label for="tec">I've read and I agree to the <a href="{{.termsURL}}">Terms</a> and <a href="{{.privacyURL}}">Privacy Policy.</a></p><br />
    <input type="button" id="submitFormData" onclick="setBot();return false" value="Submit" />
</form>

<div id="output" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title" id="output-title"></h2>
        <p id="output-text"></p>
        <p style="font-size: 15px;" uk-toggle="target: #output-more; animation: uk-animation-slide-bottom, uk-animation-slide-top"><span uk-icon="play"></span><u>Details</u></p>
        <p id="output-more" style="font-size: 15px;"></p>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button" style="color: #e5e5e5">Close</button>
        </p>
    </div>
</div>

{{ template "after.html" . }}