{% load i18n %}

<div class="d-flex justify-content-between mb-2">
	<div class="btn-group diagram-zoom">
		<button class="btn btn-sm btn-light btn-diagram-zoom border rounded rounded-end-0 px-3 py-1" id="+" type="button">
			<i class="bi bi-zoom-in"></i>
		</button>
		<div class="bg-light border border-start-0 border-end-0 text-center px-2 py-1" id="diagramZoomPercent"></div>
		<button class="btn btn-sm btn-light btn-diagram-zoom border rounded rounded-start-0 px-3 py-1" id="-" type="button">
			<i class="bi bi-zoom-out"></i>
		</button>
	</div>
	{% trans "Добавить команду" as add_button_text %}
	{% include 'widgets/add_button.html' with size="sm" id="telegramBotCommandOffcanvasButton" text=add_button_text %}
</div>
<div class="border rounded" id="diagram">
	<svg id="diagramSvg">
		<defs>
			<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
				<path d="M0,0 L0,6 L9,3 z">
			</marker>
		</defs>
	</svg>
</div>