<template>
    <t t-name="DiagramView">
        <div class="oe_diagram_header" t-att-id="element_id + '_header'">
        	<h2 class="oe_view_title"><t t-esc="fields_view.arch.attrs.string"/></h2>
            <div class="oe_diagram_buttons">
                <button type="button" id="new_node" class="oe_diagram_button_new">New Node</button>
                <button type="button" id="new_edge" class="oe_diagram_button_new">New Edge</button>
                <label>Show Grid:</label><input type="checkbox" id="toggle_grid" checked="checked"/>
            </div>
            <div class="oe_diagram_pager">
                <button type="button" data-pager-action="first">First</button>
                <button type="button" data-pager-action="previous">&lt;&lt;</button>

                <span class="oe_pager_index">0</span> / <span class="oe_pager_count">0</span>

                <button type="button" data-pager-action="next">&gt;&gt;</button>
                <button type="button" data-pager-action="last">Last</button>
            </div>
        </div>
        <div id="dia-canvas" class="diagram show_grid" style="overflow: auto;"></div>
    </t>
</template>