{% load i18n %}

<div class="offcanvas offcanvas-start" tabindex="-1" id="telegramBotCommandOffcanvas" aria-labelledby="telegramBotCommandOffcanvasLabel">
	<div class="offcanvas-header border-bottom">
		<h5 class="offcanvas-title" id="telegramBotCommandOffcanvasLabel"></h5>
		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body d-flex flex-column gap-3">
		<div>
			<h6 class="mb-1">{% trans "Название команды" %}</h6>
			<input class="form-control" id="telegramBotCommandOffcanvasNameInput" type="text" placeholder="{% trans "Введите название команды" %}">
		</div>
		<div class="d-none" id="telegramBotCommandOffcanvasCommandAddition">
			<h6 class="mb-1">{% trans "Команда" context "Command" %}</h6>
			<div class="d-flex flex-column gap-2">
				<input class="form-control" id="telegramBotCommandOffcanvasCommandTextInput" type="text" placeholder="{% trans "Введите команду" %}">
				<input class="form-control d-none" id="telegramBotCommandOffcanvasCommandDescriptionInput" type="text" placeholder="{% trans "Введите описание команды" %}">
				<button class="btn btn-sm btn-dark" id="telegramBotCommandOffcanvasCommandShowInMenuButton" type="button">{% trans "Отображать в меню" %}</button>
				<button class="btn btn-sm btn-dark d-none" id="telegramBotCommandOffcanvasCommandNotShowInMenuButton" type="button">{% trans "Не отображать в меню" %}</button>
			</div>
		</div>
		<div class="d-none" id="telegramBotCommandOffcanvasImageAddition">
			<h6 class="mb-1">{% trans "Изображение" %}</h6>
			<div class="d-flex flex-column gap-2">
				<img class="img-thumbnail rounded d-none" id="telegramBotCommandOffcanvasImagePreview">
				<input class="form-control" id="telegramBotCommandOffcanvasImageInput" type="file" accept="image/*">
			</div>
		</div>
		<div>
			<h6 class="mb-1">{% trans "Текст сообщения" %}</h6>
			<textarea id="telegramBotCommandOffcanvasMessageText"></textarea>
		</div>
		<div class="d-none" id="telegramBotCommandOffcanvasKeyboardAddition">
			<h6 class="mb-1">{% trans "Клавиатура" %}</h6>
			<div class="d-flex flex-column gap-2">
				<div class="btn-group" role="group">
					<input class="btn-check" id="telegramBotCommandOffcanvasDefaultKeyboardRadio" name="telegramBotCommandOffcanvasKeyboardModes" value="default" type="radio" autocomplete="off">
					<label class="btn btn-sm btn-outline-dark w-50" for="telegramBotCommandOffcanvasDefaultKeyboardRadio">{% trans "Обычная" %}</label>
					<input class="btn-check" id="telegramBotCommandOffcanvasInlineKeyboardRadio" name="telegramBotCommandOffcanvasKeyboardModes" value="inline" type="radio" autocomplete="off">
					<label class="btn btn-sm btn-outline-dark w-50" for="telegramBotCommandOffcanvasInlineKeyboardRadio">{% trans "Встроенная" %}</label>
					{% comment %} <input class="btn-check" id="telegramBotCommandOffcanvasPaymentKeyboardRadio" name="telegramBotCommandOffcanvasKeyboardModes" value="payment" type="radio" autocomplete="off">
					<label class="btn btn-sm btn-outline-dark" for="telegramBotCommandOffcanvasPaymentKeyboardRadio" style="width: 33%;">{% trans "Платёжная" %}</label> {% endcomment %}
				</div>
				<div class="d-flex flex-wrap bg-light border rounded gap-1 p-1" id="telegramBotCommandOffcanvasKeyboardButtonsRows" style="min-height: 41px;"></div>
				<div>
					<div class="d-flex flex-column gap-1" id="telegramBotCommandOffcanvasKeyboardButtons"></div>
					<button class="btn btn-sm btn-outline-dark w-100 mt-1" id="telegramBotCommandOffcanvasKeyboardAddButton" type="button">{% trans "Добавить кнопку" %}</button>
				</div>
			</div>
		</div>
		<div class="d-none" id="telegramBotCommandOffcanvasApiRequestAddition">
			<h6 class="mb-1">{% trans "API-запрос" %}</h6>
			<div class="d-flex flex-column gap-2">
				<input type="text" class="form-control" id="telegramBotCommandOffcanvasApiRequestUrlInput" placeholder="{% trans 'Введите URL-адрес' %}">
				<div class="btn-group" role="group">
					{% with 'telegramBotCommandOffcanvasApiRequestMethods' as radio_name %}
						<input class="btn-check" id="telegramBotCommandOffcanvasApiRequestGetMethod" name="{{ radio_name }}" value="get" type="radio" autocomplete="off">
						<label class="btn btn-sm btn-outline-dark" for="telegramBotCommandOffcanvasApiRequestGetMethod" style="width: 20%;">GET</label>
						<input class="btn-check" id="telegramBotCommandOffcanvasApiRequestPostMethod" name="{{ radio_name }}" value="post" type="radio" autocomplete="off">
						<label class="btn btn-sm btn-outline-dark" for="telegramBotCommandOffcanvasApiRequestPostMethod" style="width: 20%;">POST</label>
						<input class="btn-check" id="telegramBotCommandOffcanvasApiRequestPutMethod" name="{{ radio_name }}" value="put" type="radio" autocomplete="off">
						<label class="btn btn-sm btn-outline-dark" for="telegramBotCommandOffcanvasApiRequestPutMethod" style="width: 20%;">PUT</label>
						<input class="btn-check" id="telegramBotCommandOffcanvasApiRequestPatchMethod" name="{{ radio_name }}" value="patch" type="radio" autocomplete="off">
						<label class="btn btn-sm btn-outline-dark" for="telegramBotCommandOffcanvasApiRequestPatchMethod" style="width: 20%;">PATCH</label>
						<input class="btn-check" id="telegramBotCommandOffcanvasApiRequestDeleteMethod" name="{{ radio_name }}" value="delete" type="radio" autocomplete="off">
						<label class="btn btn-sm btn-outline-dark" for="telegramBotCommandOffcanvasApiRequestDeleteMethod" style="width: 20%;">DELETE</label>
					{% endwith %}
				</div>
				<div class="border rounded p-2 d-none" id="telegramBotCommandOffcanvasApiRequestHeadersEditor"></div>
				<button class="btn btn-sm btn-dark" id="telegramBotCommandOffcanvasApiRequestShowHeadersEditorButton" type="button">{% trans "Добавить заголовки" %}</button>
				<button class="btn btn-sm btn-dark d-none" id="telegramBotCommandOffcanvasApiRequestHideHeadersEditorButton" type="button">{% trans "Убрать заголовки" %}</button>
				<div class="border rounded p-2 d-none" id="telegramBotCommandOffcanvasApiRequestDataEditor"></div>
				<button class="btn btn-sm btn-dark" id="telegramBotCommandOffcanvasApiRequestShowDataEditorButton" type="button">{% trans "Добавить данные" %}</button>
				<button class="btn btn-sm btn-dark d-none" id="telegramBotCommandOffcanvasApiRequestHideDataEditorButton" type="button">{% trans "Убрать данные" %}</button>
			</div>
		</div>
		<div class="d-none" id="telegramBotCommandOffcanvasDatabaseRecordAddition">
			<h6 class="mb-1">{% trans "Запись в базу данных" %}</h6>
			<div class="border rounded p-2" id="telegramBotCommandOffcanvasDatabaseRecordEditor"></div>
		</div>
		<div>
			<h6 class="mb-1">{% trans "Доступные дополнения" %}</h6>
			<div class="d-flex flex-column bg-light border rounded gap-1 p-1" id="telegramBotCommandOffcanvasAdditions">
				<button class="btn btn-sm btn-dark" addition-target="#telegramBotCommandOffcanvasCommandAddition" type="button">{% trans "Команда" context "Command" %}</button>
				<button class="btn btn-sm btn-dark" addition-target="#telegramBotCommandOffcanvasImageAddition" type="button">{% trans "Изображение" %}</button>
				<button class="btn btn-sm btn-dark" addition-target="#telegramBotCommandOffcanvasKeyboardAddition" type="button">{% trans "Клавиатура" %}</button>
				<button class="btn btn-sm btn-dark" addition-target="#telegramBotCommandOffcanvasApiRequestAddition" type="button">{% trans "API-запрос" %}</button>
				<button class="btn btn-sm btn-dark" addition-target="#telegramBotCommandOffcanvasDatabaseRecordAddition" type="button">{% trans "Запись в базу данных" %}</button>
			</div>
		</div>
	</div>
	<div class="offcanvas-header border-top">
		<button class="btn btn-success w-100 d-none" id="telegramBotCommandOffcanvasAddCommandButton" type="button">{% trans "Добавить команду" %}</button>
		<button class="btn btn-success w-100 d-none" id="telegramBotCommandOffcanvasSaveCommandButton" type="button">{% trans "Сохранить команду" %}</button>
	</div>
</div>