Untitled

<div style="border: 1px solid black; padding: 10px;">
	<!-- Title -->
	<div>
		<div style="display: flex; justify-content: space-between">
			<div style="
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        ">
				<img src="../../../../assets/bhutan-image//nchm-logo.jpg"
					alt="NCHM logo"
					width="140"
					height="140"
					style="padding: 10px; align-self: center">
			</div>
			<div style="
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        ">
				<p style="font-size: 16px; font-weight: bold; color: #3987bf">
					AGRO-METEOROLOGY ADVISORY BULLETIN
				</p>
				<p style="font-size: 16px; font-weight: bold">
					ISSUED FOR TSENTO, PARO
				</p>
			</div>
			<div style="
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        ">
				<img src="../../../../assets//bhutan-image/DOA-logo.png"
					alt="DOA logo"
					width="120"
					height="120"
					style="padding: 10px; align-self: center">
			</div>
		</div>
	</div>
	<!-- Issued by -->
	<div style="
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #2a92db33;
      padding: 16px;
      border: 1px solid #4496c8;
      margin-top: 10px;
    ">
		<div style="display: flex; justify-content: center">
			<div style="display: flex; flex-flow: column wrap; align-items: center">
				<p style="font-size: 18px; font-weight: bold">
					Issued by: DEPARTMENT OF AGRICULTURE, MoAF
				</p>
				<p style="font-size: 16px; font-weight: bold; margin-bottom: 0px">
					<i>
						Prepared based on weather forecast received from NCHM
					</i>
				</p>
			</div>
		</div>
	</div>
	<!-- Bulletin no -->
	<div style="padding: 0px 48px; margin: 24px 0px">
		<div style="
        display: flex;
        justify-content: space-between;
        border: 1px dotted black;
        padding: 10px;
        font-weight: bold;
      ">
			<div>Bulletin No: 1</div>
			<div>
				Date of issue: 16/3/23
			</div>
		</div>
	</div>
	<!-- Weather forecast -->
	<div style="display: flex;">
		<div style="background-color: #93bbda; flex: 1; display: flex;
    align-items: stretch;">
			<div style="
          padding-bottom: 24px;
          padding-top: 10px;
          border: 1px solid black;
          background-color: #93bbda;
          flex: 1;
        ">
				<div style="
            font-size: 18px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            background-color: #93bbda;
            padding-bottom: 21px;
            margin-bottom: 24px;
            border-bottom: 1px solid black;
          ">
					Weather observed for the period (19/02/24 to 26/02/24)
				</div>
				<!-- <hr style="margin-top: 20px; margin-bottom: 20px; color: black;"> -->
				<div style="
            display: flex;
            justify-content: center;
            background-color: #93bbda;
            padding-left: 12px;
            padding-right: 12px;
          ">
					<table style="
              border: 1px solid black;
              border-collapse: collapse;
              width: 100%;
              background-color: #93bbda;
            ">
						<tbody>
							<tr>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Parameter</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 1</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 2</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 3</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 4</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 5</th>
								<th style="
                  border: 1px solid black;
                  background-color: #93bbda;
                  text-align: left;
                  padding: 6px;
                ">Day 6</th>
								<th style="
                border: 1px solid black;
                background-color: #93bbda;
                text-align: left;
                padding: 6px;
              ">Day 7</th>
								<th style="
              border: 1px solid black;
              background-color: #93bbda;
              text-align: left;
              padding: 6px;
            ">Day 8</th>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">Rainfall(mm)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
								<td style="
                  border: 1px solid black;
                  background-color: #93bbda;
                  text-align: left;
                  padding: 6px;
                ">Light</td>
								<td style="
                border: 1px solid black;
                background-color: #93bbda;
                text-align: left;
                padding: 6px;
              ">Light</td>
								<td style="
              border: 1px solid black;
              background-color: #93bbda;
              text-align: left;
              padding: 6px;
            ">Light</td>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">Max temp(&deg;C)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">28.5</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">28</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">28</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                  border: 1px solid black;
                  background-color: #93bbda;
                  text-align: left;
                  padding: 6px;
                "></td>
								<td style="
                border: 1px solid black;
                background-color: #93bbda;
                text-align: left;
                padding: 6px;
              "></td>
								<td style="
              border: 1px solid black;
              background-color: #93bbda;
              text-align: left;
              padding: 6px;
            "></td>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">Min temp(&deg;C)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">21.5</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">21</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">20</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                  border: 1px solid black;
                  background-color: #93bbda;
                  text-align: left;
                  padding: 6px;
                "></td>
								<td style="
                border: 1px solid black;
                background-color: #93bbda;
                text-align: left;
                padding: 6px;
              "></td>
								<td style="
              border: 1px solid black;
              background-color: #93bbda;
              text-align: left;
              padding: 6px;
            "></td>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">RH(%)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                  border: 1px solid black;
                  background-color: #93bbda;
                  text-align: left;
                  padding: 6px;
                "></td>
								<td style="
                border: 1px solid black;
                background-color: #93bbda;
                text-align: left;
                padding: 6px;
              "></td>
								<td style="
              border: 1px solid black;
              background-color: #93bbda;
              text-align: left;
              padding: 6px;
            "></td>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">Wind Speed(m/sec)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                  border: 1px solid black;
                  background-color: #93bbda;
                  text-align: left;
                  padding: 6px;
                "></td>
								<td style="
                border: 1px solid black;
                background-color: #93bbda;
                text-align: left;
                padding: 6px;
              "></td>
								<td style="
              border: 1px solid black;
              background-color: #93bbda;
              text-align: left;
              padding: 6px;
            "></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div style="background-color: #93bbda; flex: 1; display: flex;
    align-items: stretch;">
			<div style="
          padding-bottom: 24px;
          padding-top: 10px;
          border: 1px solid black;
          background-color: #93bbda;
          flex: 1;
        ">
				<div style="
            font-size: 18px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            background-color: #93bbda;
            padding-bottom: 21px;
            margin-bottom: 24px;
            border-bottom: 1px solid black;
          ">
					Weather forecast for the period (26/02/24 to 01/03/24)
				</div>
				<!-- <hr style="margin-top: 20px; margin-bottom: 20px; color: black;"> -->
				<div style="
            display: flex;
            justify-content: center;
            background-color: #93bbda;
            padding-left: 12px;
            padding-right: 12px;
          ">
					<table style="
              border: 1px solid black;
              border-collapse: collapse;
              width: 100%;
              background-color: #93bbda;
            ">
						<tbody>
							<tr>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Parameter</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 1</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 2</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 3</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 4</th>
								<th style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Day 5</th>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">Rainfall(mm)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">Light</td>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">Max temp(&deg;C)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">28.5</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">28</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">28</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">Min temp(&deg;C)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">21.5</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">21</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  ">20</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">RH(%)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
							</tr>
							<tr>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                    font-weight: bold;
                  ">Wind Speed(m/sec)</td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
								<td style="
                    border: 1px solid black;
                    background-color: #93bbda;
                    text-align: left;
                    padding: 6px;
                  "></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- Crop Specific Advisories -->
	<div style="margin-top: 21px">
		<div style="font-size: 16px; font-weight: bold">
			AGRO- ADVISORIES W.E.F 12/3/23 to 21/3/23
		</div>
	</div>
	<div style="margin-top: 24px">
		<table style="border-collapse: collapse; width: 100%">
			<tbody>
				<tr>
					<th style="
              border-left: 1px solid black;
              border-top: 1px solid black;
              border-bottom: 1px solid black;
              border-right: 1px solid transparent;
              background-color: #efc68f;
              text-align: center;
              padding: 6px;
              width: 30%;
              height: 100px;
            ">CROP</th>
					<th style="
              border-left: 1px solid transparent;
              border-top: 1px solid black;
              border-bottom: 1px solid black;
              border-right: 1px solid black;
              background-color: #efc68f;
              text-align: center;
              padding: 6px;
              width: 70%;
              height: 100px;
            ">AGRO-ADVISORIES</th>
				</tr>
				<tr *ngFor="let subData of dataList">
					<td style="border: 1px solid black; text-align: left; padding: 6px">
						<span class="h5">
							{{ subData.cropName || "Crop name not available" }}
						</span>
						<span class="h6"
							style="margin-left: 0.4em">
							(Location: {{ subData.location || "Location not available" }},
              Plantation Date:
              {{
              subData.planting_start_date ||
              "Plantation date not available"
              }})
						</span>
					</td>
					<td style="border: 1px solid black; text-align: left; padding: 6px">
						<div class="card-body">
							<div *ngIf="!subData"
								class="mt-2">
								Advisory, Symptoms, and Remedies are not available.
							</div>
							<div *ngIf="subData">
								<!-- Disease section -->
								<div style="display: flex"
									class="h5">
									<i style="
                  font-size: 20px;
                  display: flex;
                  align-items: center;
                "
										class="material-symbols-outlined mr-6 fa-solid fa-virus-covid"></i>
									Disease
								</div>
								<div *ngIf="subData.diseaseList.length > 0"
									style="padding-left: 2em; margin-bottom: 24px">
									<div>
										<div *ngFor="
                          let diseaseData of subData.diseaseList;
                          let i = index
                        "
											class="d-flex flex-wrap"
											style="gap: 0.5em; margin: 24px 0">
											<span style="
                            display: flex;
                            justify-content: space-between;
                            align-items: baseline;
                            width: 100%;
                          ">
												<span style="width: 100%">
													<b>
														<span style="
                                  display: flex;
                                  justify-content: flex-start;
                                  align-items: center;
                                ">
															<span style="display: flex">
																<i style="
                                font-size: 16px;
                                display: flex;
                                align-items: center;
                              "
																	class="material-symbols-outlined mr-6 fa-solid fa-virus-covid"></i>
															</span>
															<span>
																{{ diseaseData?.name ? diseaseData?.name + ' :' : diseaseData?.name + ' not available'}}
															</span>
														</span>
													</b>
												</span>
											</span>
											<span style="margin-left: 2.5em; width: 93%">
												{{ diseaseData?.description ? diseaseData?.description : diseaseData?.description + ' not
                        available'}}
											</span>
											<div class="container"
												style="width: 96.5%; margin-left: 2em">
												<div class="row">
													<div class="mt-2 col">
														<b class="ms-3">Symptoms</b>
														<ul class="pt-2">
															<div *ngIf="!diseaseData?.symptom"
																class="mt-2">
																Symptoms not available.
															</div>
															<div *ngIf="diseaseData?.symptom">
																<div *ngFor="
                                      let symptom of diseaseData.symptom;
                                      let j = index
                                    ">
																	<li *ngIf="symptom">
																		<span>
																			{{ symptom?.details }}
																		</span>
																	</li>
																</div>
															</div>
														</ul>
													</div>
													<div class="mt-2 col card-border">
														<b class="ms-3">Remedy</b>
														<ul class="pt-2">
															<div *ngIf="!diseaseData?.remedy"
																class="mt-2">
																Remedies not available.
															</div>
															<div *ngIf="diseaseData?.remedy">
																<div *ngFor="
                                      let remedy of diseaseData?.remedy;
                                      let j = index
                                    ">
																	<li *ngIf="remedy?.details">
																		<span>
																			{{ remedy.details }}
																		</span>
																	</li>
																</div>
															</div>
														</ul>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div *ngIf="subData?.diseaseList && subData?.diseaseList?.length <= 0">
									<div class="mt-2"
										style="margin-left: 36px; margin-bottom: 12px">
										Disease info not available.
									</div>
								</div>



								<!-- Pest section -->
								<div style="display: flex"
									class="h5">
									<i style="
                  font-size: 20px;
                  display: flex;
                  align-items: center;
                "
										class="material-symbols-outlined mr-6 fa-solid fa-bug"></i>
									Pest
								</div>
								<div *ngIf="subData.pestList.length > 0"
									style="padding-left: 2em; margin-bottom: 24px">
									<div>
										<div *ngFor="let pestData of subData.pestList; let i = index"
											class="d-flex flex-wrap"
											style="gap: 0.5em; margin: 24px 0">
											<span style="
                            display: flex;
                            justify-content: space-between;
                            align-items: baseline;
                            width: 100%;
                          ">
												<span style="width: 100%">
													<b>
														<span style="
                                  display: flex;
                                  justify-content: flex-start;
                                  align-items: center;
                                ">
															<span style="display: flex">
																<i style="
                  font-size: 16px;
                  display: flex;
                  align-items: center;
                "
																	class="material-symbols-outlined mr-6 fa-solid fa-bug"></i>
															</span>
															<span>
																{{ pestData?.name ? pestData?.name + ' :' : pestData?.name + ' not available'}}
															</span>
														</span>
													</b>
												</span>
											</span>
											<span style="margin-left: 2.5em; width: 93%">
												{{ pestData?.description ? pestData?.description + ' :' : pestData?.description + ' not
                        available'}}
											</span>
											<div class="container"
												style="width: 98%; margin-left: 0.7em">
												<div class="row">
													<div class="mt-2 col">
														<b class="ms-3">Symptoms</b>
														<ul class="pt-2">
															<div *ngIf="!pestData?.symptom"
																class="mt-2">
																Symptoms not available.
															</div>
															<div *ngIf="pestData?.symptom">
																<div *ngFor="
                                      let symptom of pestData.symptom;
                                      let j = index
                                    ">
																	<li *ngIf="symptom">
																		<span>
																			{{ symptom?.details }}
																		</span>
																	</li>
																</div>
															</div>
														</ul>
													</div>
													<div class="mt-2 col card-border">
														<b class="ms-3">Remedy</b>
														<ul class="pt-2">
															<div *ngIf="!pestData?.remedy"
																class="mt-2">
																Remedies not available.
															</div>
															<div *ngIf="pestData?.remedy">
																<div *ngFor="
                                      let remedy of pestData?.remedy;
                                      let j = index
                                    ">
																	<li *ngIf="remedy?.details">
																		<span>
																			{{ remedy.details }}
																		</span>
																	</li>
																</div>
															</div>
														</ul>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div *ngIf="subData?.pestList && subData?.pestList?.length <= 0">
									<div class="mt-2"
										style="margin-left: 36px; margin-bottom: 12px">
										Pest info not available.
									</div>
								</div>



								<!-- Generic section -->
								<div style="display: flex"
									class="h5">
									<i style="
                  font-size: 20px;
                  display: flex;
                  align-items: center;
                "
										class="material-symbols-outlined mr-6 fa-solid fa-notes-medical"></i>
									Generic
								</div>
								<div *ngIf="subData?.genericList?.length > 0"
									style="padding-left: 2em; margin-bottom: 24px">
									<div>
										<div *ngFor="
                          let genericData of subData.genericList;
                          let i = index
                        "
											class="d-flex flex-wrap"
											style="gap: 0.5em; margin: 24px 0">
											<span style="
                            display: flex;
                            justify-content: space-between;
                            align-items: baseline;
                            width: 100%;
                          ">
												<span style="width: 100%">
													<b>
														<span style="
                                  display: flex;
                                  justify-content: flex-start;
                                  align-items: center;
                                ">
															<span style="display: flex">
																<i style="
                  font-size: 16px;
                  display: flex;
                  align-items: center;
                "
																	class="material-symbols-outlined mr-6 fa-solid fa-notes-medical"></i>
															</span>
															<span>
																{{ genericData?.name ? genericData?.name + ' :' : genericData?.name + ' not available'}}
															</span>
														</span>
													</b>
												</span>
											</span>
											<span style="margin-left: 2.5em; width: 93%">
												{{ genericData?.description ? genericData?.description : genericData?.description + ' not
                        available'}}
											</span>
											<div class="container"
												style="width: 97%; margin-left: 2em">
												<div class="row">
													<div class="mt-2 col">
														<b class="ms-3">Advisory</b>
														<div *ngIf="!genericData?.advisory"
															class="mt-2"
															style="margin-left: 1.1em">
															Advisory not available.
														</div>
														<div *ngIf="genericData?.advisory">
															<ul class="pt-2">
																<li>
																	<span>
																		{{ genericData?.advisory?.details ? genericData?.advisory?.details :
                                    genericData?.advisory?.details + ' not available'}}
																	</span>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div *ngIf="subData?.genericList && subData?.genericList?.length <= 0">
									<div class="mt-2"
										style="margin-left: 36px; margin-bottom: 12px">
										Generic advisory not available.
									</div>
								</div>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div style="margin: 48px 60px;">
		<!-- Warning -->
		<div style="padding: 12px; height: 70px; border: 2px solid red; font-size: 16px; font-weight: bold;">
			<p style="color: red;">WARNING:</p>
		</div>
		<div style="margin-top: 27px;">
			<img src="../../../../assets/bhutan-image/logo-wb-header-en.svg"
				alt="THE WORLD BANK logo"
				width="300"
				style="padding: 10px; align-self: center">
		</div>
		<div style="border-top: 2px solid black; margin-top: 36px;">
			Contact: Agrometeorology Program, Thimphu 322228/331386/ website: www.agromet.gov.bt
		</div>
	</div>
</div>