<!-- The Weather Analysis Start -->
                        <div class="w3-display-topleft left-block">
                            <div class="services-block__inner">
                                <div class="w3-display block-content">
                                    <div *ngIf="AvgProvider" class="cel-wrapper">
                                        <div class="cel-blcok">
                                            <div>
                                                <label *ngIf="AvgProvider[0].maxTemp">{{AvgProvider[0].maxTemp| number : '.0-0'}}<span>°C</span><img
                            class="temp-img" [matTooltip]="AvgProvider[0].description"
                            src="assets/weatherunlockImg/{{AvgProvider[0].icon}}">
                        </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="humidity-block" *ngIf="AvgProvider">
                                        <!-- <h3>The Weather Man</h3> -->
                                        <div class="humidity-block__inner">
                                            <!-- <div *ngIf="AvgProvider[0].maxTemp">{{AvgProvider[0].maxTemp| number : '.0-0'}}°C (max)</div>
                        <div *ngIf="AvgProvider[0].minTemp">{{AvgProvider[0].minTemp| number : '.0-0'}}°C (min)</div> -->
                                            <div *ngIf="AvgProvider[0].humid"><img src="assets/icon-humidity.png" alt="" />Humidity:
                                                <span>{{AvgProvider[0].humid| number : '.0-0'}}%</span></div>
                                            <div *ngIf="AvgProvider[0].precipitation"><img src="assets/icon-precipitation.png" alt="" />Precipitation:
                                                <span>{{AvgProvider[0].precipitation| number : '.0-0'}}mm</span></div>
                                            <div *ngIf="AvgProvider[0].pressure"><img src="assets/icon-pressure.png" alt="" />Pressure:
                                                <span>{{AvgProvider[0].pressure| number : '.0-0'}}mb</span></div>
                                            <!-- <div *ngIf="AvgProvider[0].wind"><img src="assets/icon-wind-speed.png" alt="" />WindSpeed:
                                                <span>{{AvgProvider[0].wind| number : '.0-0'}}</span></div> -->
                                            <div><img src="assets/icon-description.png" alt="" />Description:
                                                <span>{{AvgProvider[0].description}}</span></div>
                                        </div>
                                    </div>
                                </div>

                                <div [ngClass]="day==0?'day-wrapper day active':'day-wrapper day '" (click)="selectedDay(0)">
                                        <div class="day-wrapper__day">{{ dates[0] | date :'EEEE' | slice:0:3 }} {{ dates[0] | date :'dd'}}
                                        </div>
                                        <div class="day-wrapper__probability">
                                            <span><img src="assets/icon-wind-speed.png" alt="" />
                        {{AvgProvider[0].wind| number : '.0-0'}}</span>
                                        </div>
                                        <div class="day-wrapper__max">{{AvgProvider[0].maxTemp| number : '.0-0'}}°</div>
                                        <div class="day-wrapper__min">{{AvgProvider[0].minTemp| number : '.0-0'}}°</div>
                                    </div>

                                    *** Same will be done for rest content***