package dev_kesimpulan

import (
	"cpone/layout"
	"cpone/component/customtextfield"
	"cpone/models"
)

templ MainKesimpulan(
	tableID string,
	tablecontent templ.Component,
	tablecontentnonlab templ.Component,
	tablecontentfisik templ.Component,
) {
	<div class="container-fluid">
		@customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "tableID",
			Name:  "tableID",
			Type:  "hidden",
			Value: tableID})
		<div class="d-flex justify-content-center pt-10 pb-10">
			<h2 class="title text-black" style="margin-bottom: 0">Kesimpulan</h2>
		</div>
		@tablecontent
		@tablecontentnonlab
		@tablecontentfisik
	</div>
}

templ CssKesimpulan() {
	<link
		rel="stylesheet"
		href="assets/css/googlefont/poppins.css"
	/>
	<link
		rel="stylesheet"
		href="assets/css/googlefont/publicsans.css"
	/>
	<link
		rel="stylesheet"
		href="assets/css/googlefont/roboto.css"
	/>
	<style>
      #canvas {
        /* overflow-x: scroll; */
        margin: 40px 10vw 40px 10vw;
      }
      #title {
        font-weight: 600;
      }
      .breadcrumb {
        background-color: white;
        padding: 0px 0px !important;
        padding-left: 0 !important;
      }

      .breadcrumb-item a {
        color: #3f4254;
        font-family: Poppins;
        font-size: 13px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
      }

      .breadcrumb-item.active {
        color: #b5b5c3;
        font-family: Poppins;
        font-size: 13px;
        font-style: normal;
        font-weight: 500;
        line-height: 21px;
      }
      .nav-tabs {
        border-bottom: 0px solid #000000 !important;
      }
      .nav-link {
        color: #637381;
        font-family: Public Sans;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        text-align: center;
      }

      .nav-link.active {
        color: #212b36 !important; /* Warna teks untuk tab yang aktif */
        border-bottom: 2px solid #0c518c !important; /* Garis bawah untuk tab yang aktif */
        font-family: Public Sans;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        text-align: center;
      }

      th {
        color: #637381;
        font-family: Roboto;
        font-weight: 700 !important;
        font-size: 14px !important;
        padding-bottom: 5px !important;
        padding-left: 1px !important;
        border-bottom: 1pt dashed #e4e6ef !important;
      }
      tr {
        border-bottom: 1pt dashed #e4e6ef !important;
        font-family: Roboto;
      }
      td {
        color: #0e1e28;
        font-family: Roboto;
        font-style: normal;
        font-weight: 500 !important;
        font-size: 16px !important;
        line-height: 30px; /* 187.5% */
        letter-spacing: -0.32px;
        padding-left: 1px !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
      }
      thead {
        border-bottom: 1pt dashed #e4e6ef !important;
      }
      .kesimpulan-desc {
        color: #0e1e28;
        font-family: Roboto;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -0.24px;
      }
      .label-text {
        background-color: grey;
        color: black;
        padding: 5px 20px 5px 20px !important;
        border-radius: 6px;
        font-family: Poppins !important;
        font-size: 11px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: normal !important;
      }
      .label-text.fit {
        background: #c9f7f5;
        color: #1bc5bd;
        padding: 5px 20px 5px 20px !important;
        border-radius: 6px;
        font-family: Poppins !important;
        font-size: 11px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: normal !important;
      }
      .label-text.unfit {
        background: #fff4de;
        color: #ffa800;
        padding: 5px 20px 5px 20px !important;
        border-radius: 6px;
        font-family: Poppins !important;
        font-size: 11px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: normal !important;
      }

      .iconify-btn {
        color: #637381 !important;
        width: 23px !important;
        height: 23px !important;
        margin-right: 1em;
      }
      .iconify-btn-blue {
        color: #0c518c !important;
        width: 23px !important;
        height: 23px !important;
        margin-right: 1em;
      }
      .modal-header {
        border-bottom: none !important;
      }
      .modal-title {
        font-family: "Public Sans" !important;
        font-size: 18px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        line-height: 28px !important;
      }
      .modal-dialog {
        border-radius: 8px;
      }
      .btn-print {
        border-radius: 6px !important;
        background-color: #f5f8fa !important;
        font-family: Roboto;
        font-size: 14px;
        margin-bottom: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
      }
      .modal-xl {
        border-radius: 6px !important;
        max-width: 90vw !important;
        max-height: 95vh !important;
        width: 90vw !important;
        height: 95vh !important;
      }
      .header-print {
        background-color: #d9d9d9;
      }
      .modal-print-title {
        color: #000;
        font-family: "Open Sans";
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
      }
      .close-print {
        color: red !important;
        width: 30px !important;
        height: 30px !important;
      }
      .form-label {
        font-family: Poppins !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: 24px !important; /* 171.429% */
      }
      .form-input {
        font-family: Poppins !important;
        font-size: 16px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 24px !important;
      }
      .btn-text {
        font-family: "Public Sans";
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
      }
      .dot-text {
        position: relative;
        padding-left: 1.5em; /* Menambahkan padding untuk memberi ruang pada titik */
      }

      .dot-text::before {
        content: "•"; /* Menambahkan titik di depan teks */
        position: absolute;
        left: 1em; /* Atur posisi titik */
        top: 0;
        transform: translateX(-100%);
      }

      .information-title {
        color: #0e1e28;
        font-family: Poppins;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
      }
    </style>
}

templ JsKesimpulan() {
}

templ ShowKesimpulan(title string, cmp templ.Component, css templ.Component, js templ.Component) {
	@layout.PlaygroundLayout(title, css, js) {
		@cmp
	}
}
