<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>

<section th:fragment="scenarioFragment" class="api-scenario">
    <div class="api-scenario-sidebar">
        <div style="background: rgba(0,0,0,.03);">
            시나리오 목록
        </div>
        <div class="pt-links ">
            <ul class="list-unstyled api-scenario-list" id="scenario_menubar">
            </ul>
        </div>
    </div>
    <div class="api-scenario-view">
        <div class="api-scenario-content">
            <div class="api-scenario-editor">
                <div class="api-scenario-editor-toolbar" style="height: 50px; border: 1px solid grey; padding: 5px;">
                    <button type="button" class="btn btn-primary btn-sm save_scenario me-2">저장</button>
                    <button type="button" class="btn btn-primary btn-sm run_scenario_step">단계 별 실행</button>
                    <button type="button" class="btn btn-primary btn-sm run_scenario_all">전체 실행</button>
                    <button type="button" class="btn btn-primary btn-sm pause_scenario">일시 정지</button>
                    <button type="button" class="btn btn-primary btn-sm stop_scenario me-2">정지</button>
<!--                    <button type="button" class="btn btn-primary btn-sm export">내보내기</button>-->
<!--                    <button type="button" class="btn btn-primary btn-sm clear me-2">초기화</button>-->
                </div>
                <div>시나리오 설명이 여기에 표시</div>
                <div class="api-scenario-editor-body" style="display: flex; flex-direction: row; flex: 1; border: 1px solid grey; padding: 5px;">
                    <div class="scenario_editor">
                        <div class="drawflow" id="drawflow">
                            <!--                        <div class="btn-lock">-->
                            <!--                            <i id="lock" class="fas fa-lock lock"></i>-->
                            <!--                            <i id="unlock" class="fas fa-lock-open unlock" style="display:none;"></i>-->
                            <!--                        </div>-->
                            <!--                        <div class="bar-zoom">-->
                            <!--                            <i class="fas fa-search-minus zoom_out"></i>-->
                            <!--                            <i class="fas fa-search zoom_reset"></i>-->
                            <!--                            <i class="fas fa-search-plus zoom_in"></i>-->
                            <!--                        </div>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="api-scenario-output">
                <div class="api-scenario-output-header">
                    <span>output</span>
                    <button type="button" class="btn btn-primary btn-sm toggle_output">숨기기</button>
                </div>
                <div class="api-scenario-output-body">
                    <div id="output" style="height: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</section>
</body>

<th:block th:fragment="scenarioScript">

</th:block>
</html>

