<!DOCTYPE html>
<html th:lang="${#locale.toString()}"
	th:lang-direction="#{language.direction}"
	xmlns:th="http://www.thymeleaf.org">

<th:block
	th:insert="~{fragments/common :: head(title=#{pipeline.title})}"></th:block>
<style>
.btn-margin {
	margin-right: 2px;
}

	.bordered-box {
       border: 1px solid #ddd;
       padding: 20px;
       margin: 20px;
       width: 70%;
   }
   
   .center-element {
   		width: 80%;
        text-align: center;
        margin: auto;
    }
    .element-margin {
        margin: 10px 0; /* Adjust this value to increase/decrease the margin as needed */
    }
</style>

<body>
	<div id="page-container">
		<div id="content-wrap">
			<div th:insert="~{fragments/navbar.html :: navbar}"></div>

			<br> <br>
			<div class="container">
				<div class="row justify-content-center">

						 <div class="bordered-box">
                        <div class="text-end text-top">
                         <button id="uploadPipelineBtn" class="btn btn-primary">Upload
                                    Custom</button>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                data-bs-target="#pipelineSettingsModal">Configure</button>
                        </div>

                        <div class="center-element">
                            <div class="element-margin">
							    <select id="pipelineSelect" class="custom-select">
							        <option value="">Select a pipeline</option>
							        <th:block th:each="config : ${pipelineConfigsWithNames}">
							            <option th:value="${config.json}" th:text="${config.name}"></option>
							        </th:block>
							    </select> 
							</div>
                            <div class="element-margin">
                                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=true)}"></div>
                            </div>
                            <div class="element-margin">
                                <button class="btn btn-primary" id="submitConfigBtn">Submit</button>
                            </div>
                        </div>
                    </div>


						<!-- The Modal -->
						<div class="modal" id="pipelineSettingsModal">
							<div class="modal-dialog">
								<div class="modal-content">

									<!-- Modal Header -->
									<div class="modal-header">
										<h2 class="modal-title">Pipeline Configuration</h2>
										<button type="button" class="close" data-bs-dismiss="modal">&times;</button>
									</div>

									<!-- Modal body -->
									<div class="modal-body">
										<div class="mb-3">
											<label for="pipelineName" class="form-label">Pipeline
												Name</label> <input type="text" id="pipelineName"
												class="form-control" placeholder="Enter pipeline name here">
										</div>
										<div class="mb-3">
											<select id="operationsDropdown" class="form-select">
												<!-- Options will be dynamically populated here -->
											</select>
										</div>
										<div class="mb-3">
											<button id="addOperationBtn" class="btn btn-primary">Add
												operation</button>
										</div>
										<h3>Pipeline:</h3>
										<ol id="pipelineList" class="list-group">
											<!-- Pipeline operations will be dynamically populated here -->
										</ol>
										<div id="pipelineSettingsContent">
											<!-- pipelineSettings will be dynamically populated here -->
										</div>
									</div>

									<!-- Modal footer -->
									<div class="modal-footer">
										<button id="savePipelineBtn" class="btn btn-success">Download</button>
										<button id="validateButton" class="btn btn-success">Validate</button>
										<div class="btn-group">
											<input type="file" id="uploadPipelineInput" accept=".json"
												style="display: none;">
										</div>
									</div>

								</div>
							</div>
						</div>

						<script src="js/pipeline.js"></script>

					</div>
			</div>
		</div>

		<div th:insert="~{fragments/footer.html :: footer}"></div>
	</div>

</body>
</html>