package employee

import (
	"cpone/layout"
	"cpone/component/under_development"
)

templ MainEmployee(cardServiceComponent templ.Component) {
	<div class="wrapper-custom">
		<!-- Navbar Start -->
		<nav
			class="navbar navbar-expand-sm navbar-expand-lg navbar-lp justify-content-between"
		>
			<a class="navbar-brand" href="#">
				<img
					src="/asset-corporate-portal/media/landingpage/logo.png"
					width="126"
					height="40"
					class="d-inline-block align-top"
					alt="Your Brand"
				/>
			</a>
			<img
				src="/asset-corporate-portal/media/logo/foto.png"
				alt="..."
				class="item-foto rounded-circle"
			/>
		</nav>
		<!-- Navbar End -->
		<div class="d-block d-lg-none d-xl-none">
			@under_development.UnderDevelopment()
		</div>
		<div class="d-none d-lg-block">
			<!--begin::Page Heading-->
			@HeadingEmployee("PT. Sadhana Abiyasa Sampoerna")
			<!--end::Page Heading-->
			<!-- content -->
			<div class="align-items-center pt-15 flex-column">
				<div class="bg-field rounded">
					<div class="content-page">
						<!-- card -->
						@cardServiceComponent
						<!-- end card -->
					</div>
				</div>
			</div>
			<!-- end content -->
		</div>
	</div>
}

templ CssEmployee() {
	<style>
      body {
        background-color: white;
        /* padding-right: 100px;
            padding-left: 100px; */
      }

      .navbar-lp {
        padding-top: 40px;
        padding-bottom: 40px;
      }

      .title {
        /* color: #FFF; */
        font-family: Poppins;
        font-size: 15px;
        /* font-size: 1vw; */
        font-style: normal;
        font-weight: 700;
      }

      .custom-card-lp {
        border-radius: 24px;
        border: 1px solid #d9d9d9;
        margin-top: 40px;
      }

      .wrapper-custom {
        /* background: #1B1D1F; */
        padding-left: 10vw;
        padding-right: 10vw;
      }

      .media-left-icon {
        width: 40px;
        height: 40px;
      }

      .items-content {
        padding: 24px;
        margin-bottom: 24px;
      }
      .content-page {
        padding-top: 24px;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 24px;
      }
      .item-foto {
        width: 32px;
        height: 32px;
      }
      .heading {
        padding-top: 40px;
      }
      .card:hover {
        background-color: rgba(197, 200, 211, 0.5);
      }
    </style>
}

templ JsEmployee() {
}

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