<div class="mainContainer" *ngIf="product.name.length > 0">
    
    <div class="mainInfo row">
        <!-- <div class="col-1"></div> -->
        <span class="productImage col-5">
            <app-carousel 
                class="carousel"
                [imageFiles]="imageFiles">
            </app-carousel>
        </span>
        <!-- <span class="separator"></span> -->
        <span class="productMainInfo col-4">

            <h1 class="productName">{{product.name}}</h1>
            <h2 class="mrp">&#8377; {{product.price}}</h2>
            <div class="hashtags">
                <div class="hashtag" *ngFor="let hashtag of product.hashtags">
                    {{ hashtag }}
                </div>
            </div>
            <h3 class="location">Location: {{getProductLocation(product)}}</h3>
            <h3 class="postedDate">Posted On: {{(product.created ? product.created : "2024-03-03T14:37:35.412Z") | date: 'MMM d, y' }} </h3>
            <h3 class="desc">Description</h3>
            {{product.description}} 

        </span>
        <div class="col-3 ">
            <div class="offer">

            <div *ngIf="checkIfProductisOfSeller(product)" [routerLink]="['/product', product._id, 'chats']" style="width: 100%;"><button class="chatBtn mt-2">Chats</button></div>
            <button *ngIf="!checkIfProductisOfSeller(product)" (click)="openChat(product.seller)" class="chatBtn mt-2">Chat With Seller</button>
            <button *ngIf="!checkIfProductisOfSeller(product)" class="offerBtn mt-2">Make Offer</button>
            </div>
            <div *ngIf="!checkIfProductisOfSeller(product)" class="add-wishlist row" (click)="clickOnWishlist(); $event.stopPropagation()" [ngClass]="isInWishlist ? 'add-wishlist-col': ''">
                <div class="col-2">
                <div class="wishlist">          
                    <input type="checkbox" class="checkbox" id="checkbox" [checked]="isInWishlist" (click)="clickOnWishlist(); "/>
                    <label for="checkbox">
                        <svg id="heart-svg" viewBox="467 392 58 57" xmlns="http://www.w3.org/2000/svg">
                            <g id="Group" fill="none" fill-rule="evenodd" transform="translate(467 392)">
                                <path d="M29.144 20.773c-.063-.13-4.227-8.67-11.44-2.59C7.63 28.795 28.94 43.256 29.143 43.394c.204-.138 21.513-14.6 11.44-25.213-7.214-6.08-11.377 2.46-11.44 2.59z" id="heart" fill="#AAB8C2"/>
                                <circle id="main-circ" fill="#E2264D" opacity="0" cx="29.5" cy="29.5" r="1.5"/>
            
                                <g id="heartgroup7" opacity="0" transform="translate(7 6)">
                                    <circle id="heart1" fill="#9CD8C3" cx="2" cy="6" r="2"/>
                                    <circle id="heart2" fill="#8CE8C3" cx="5" cy="2" r="2"/>
                                </g>
            
                                <g id="heartgroup6" opacity="0" transform="translate(0 28)">
                                    <circle id="heart1" fill="#CC8EF5" cx="2" cy="7" r="2"/>
                                    <circle id="heart2" fill="#91D2FA" cx="3" cy="2" r="2"/>
                                </g>
            
                                <g id="heartgroup3" opacity="0" transform="translate(52 28)">
                                    <circle id="heart2" fill="#9CD8C3" cx="2" cy="7" r="2"/>
                                    <circle id="heart1" fill="#8CE8C3" cx="4" cy="2" r="2"/>
                                </g>
            
                                <g id="heartgroup2" opacity="0" transform="translate(44 6)">
                                    <circle id="heart2" fill="#CC8EF5" cx="5" cy="6" r="2"/>
                                    <circle id="heart1" fill="#CC8EF5" cx="2" cy="2" r="2"/>
                                </g>
            
                                <g id="heartgroup5" opacity="0" transform="translate(14 50)">
                                    <circle id="heart1" fill="#91D2FA" cx="6" cy="5" r="2"/>
                                    <circle id="heart2" fill="#91D2FA" cx="2" cy="2" r="2"/>
                                </g>
            
                                <g id="heartgroup4" opacity="0" transform="translate(35 50)">
                                    <circle id="heart1" fill="#F48EA7" cx="6" cy="5" r="2"/>
                                    <circle id="heart2" fill="#F48EA7" cx="2" cy="2" r="2"/>
                                </g>
            
                                <g id="heartgroup1" opacity="0" transform="translate(24)">
                                    <circle id="heart1" fill="#9FC7FA" cx="2.5" cy="3" r="2"/>
                                    <circle id="heart2" fill="#9FC7FA" cx="7.5" cy="2" r="2"/>
                                </g>
                            </g>
                        </svg>
                    </label>
               </div>
               </div>
                    <div class="col-10 add-text">WISHLIST</div>
            </div>
            <div class="sellerInfo">
                <img src="../../../assets/images/avatar.png" alt="Avatar" class="avatar">
                <h3 class="sellerName">{{product.sellerUname ? product.sellerUname : 'Apurva Hegde'}}</h3>
            </div>
            <div class="additionalInfoData" *ngIf="productLocation.length>0 && displayMap">
                <h2 class="desc">Location</h2>
                <app-geolocation [coordinates]="productLocation"></app-geolocation>
            </div> 

        </div>
    </div>

    <!-- <div class="additionalInfo">
        <div class="additionalInfoData">
            <h2 class="desc">Description</h2>
            {{product.description}} 
        </div>

        <div class="additionalInfoData" *ngIf="productLocation.length>0 && displayMap">
            <h2 class="desc">Location</h2>
            <app-geolocation [coordinates]="productLocation"></app-geolocation>
        </div>
    </div> -->

</div>
