{{#section 'meta'}}
<title>Paket</title>
{{/section}}

<style type="text/css">
	ul.package-features {
		max-height: 120px;
		overflow-y: auto;
	    list-style: none;
	    padding: 0;
	    margin: 0;
	}

	.package-features li {
	    border-bottom: solid 1px #acafb6;
	    padding: 0.25rem 0;
	}

	.package-icons {
	    display: inline-block;
	    padding: 1rem;
	    background: var(--bs-green);
	    color: white;
	    border-radius: 50%;
	    width: 64px;
	    height: 64px;
	}

	.package-icons i {    
		font-size: 2.5rem;
	    line-height: .75;
	}
</style>

<section>
	<!-- start page title -->
	<div class="row">
		<div class="col-12">
			<div class="page-title-box d-sm-flex align-items-center justify-content-between">
				<h4 class="mb-sm-0 font-size-18">Paket</h4>

				<div class="page-title-right">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a href="javascript: void(0);">Whatsapp</a></li>
						<li class="breadcrumb-item active">Paket</li>
					</ol>
				</div>

			</div>
		</div>
	</div>
	<!-- end page title -->
	
	<div class="section-body">
		<div class="container">
			
			<div class="row">
				{{#each packages}}
				<div class="col-lg-3 pb-3">
					<div class="card shadow-lg">
						<div class="card-header">
							<div class="card-title">{{this.name}}</div>
						</div>
						<div class="card-body">
							<div class="text-center mb-4">
								<div class="package-icons">
									<i class="fa-whatsapp fab"></i>
								</div>
							</div>
							<div class="text-center mb-2"><h4 class="d-inline-block">Rp.{{number_format this.price}}/</h4>Bln</div>
							<b>Features:</b>
							<ul class="package-features">
								{{#jsoneach this.features}}
								<li class="package-feature-items">{{this}}</li>
								{{/jsoneach}}
							</ul>
						</div>
						<div class="card-footer">
							<div class="text-center">
								<a href="{{base_url '/member_area/whatsapp/package'}}/{{this.slug}}/order" class="btn btn-primary btn-sm px-4"><i class="fa fa-cart-arrow-down"></i> Pilih Paket</a>
							</div>
						</div>
					</div>
				</div>
				{{/each}}
			</div>

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