<ion-header>
  <ion-toolbar mode="ios" class="sangh">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">About sangh</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sangh" *ngIf="sanghData">
  <h5>Basic Info</h5>
  <div class="bg">
    <div class="follow-box" *ngIf="sanghData.sangh_type">
      <div class="icons icon-common"><img src="/assets/images/sangh-type.svg"></div>
      <div>
        <p>{{ sanghType }}</p>
        <p>Sangh Type</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="derasarType && sanghType === 'Derasar'">
      <div class="icons icon-common"><img src="/assets/images/sangh-type.svg"></div>
      <div>
        <p>{{ derasarType }}</p>
        <p>Derasar Type</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="bhagwanName && sanghType === 'Derasar'">
      <div class="icons icon-common"><img src="/assets/images/god.svg"></div>
      <div>
        <p>{{ bhagwanName }}</p>
        <p>Mulnayak Bhagwan Name</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.dharma?.name">
      <div class="icons icon-common"><img src="/assets/images/dharm-sangh.svg"></div>
      <div>
        <p>{{sanghData.dharma?.name}}</p>
        <p>Dharm</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.sampraday?.name">
      <div class="icons icon-common"><img src="/assets/images/mother-tongue-sangh.svg"></div>
      <div>
        <p>{{sanghData.sampraday?.name}}</p>
        <p>Sampraday</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.name">
      <ion-icon name="person" class="icon-common"></ion-icon>
      <div>
        <p>{{sanghData.name}}</p>
        <p>Name</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.reg_number">
      <div class="icons icon-common"><img src="/assets/images/registration-no-icon.svg"></div>
      <div>
        <p>{{sanghData.reg_number}}</p>
        <p>Registration Number</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.reg_date">
      <ion-icon name="calendar" class="icon-common"></ion-icon>
      <div>
        <p>{{sanghData.reg_date}}</p>
        <p>Registration Date</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="numberOfMember">
      <div class="icons icon-common"><img src="/assets/images/members-group.svg"></div>
      <div>
        <p>{{numberOfMember}}</p>
        <p>Number of members</p>
      </div>
    </div>
  </div>



  <h5>Additional Details</h5>
  <div class="bg">
    <div class="follow-box" *ngIf="sanghData.state">
      <div class="icons icon-common"><img src="/assets/images/city-icon.svg"></div>
      <div>
        <p>{{sanghData.state}}</p>
        <p>State</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.city">
      <div class="icons icon-common"><img src="/assets/images/city-icon.svg"></div>
      <div>
        <p>{{sanghData.city}}</p>
        <p>City</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.address" (click)="address()">
      <div class="icons icon-common"><img src="/assets/images/location-sangh.svg"></div>
      <div>
        <p>{{sanghData.address}}</p>
        <p>Sangh Address</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.apartment_name">
      <div class="icons icon-common"><img src="/assets/images/location-sangh.svg"></div>
      <div>
        <p>{{sanghData.apartment_name}}</p>
        <p>House No / Apartment Name</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.email">
      <ion-icon name="mail" class="icon-common"></ion-icon>
      <div>
        <p>{{sanghData.email}}</p>
        <p>Email Address</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.mobile_number">
      <ion-icon name="call" class="icon-common"></ion-icon>
      <div>
        <p>+91 {{sanghData.mobile_number}}</p>
        <p>Pedhi / Manager Mobile number</p>
      </div>
    </div>

    <div class="follow-box" *ngIf="sanghData.sangh_website">
      <ion-icon name="globe" class="icon-common"></ion-icon>
      <div>
        <p>{{sanghData.sangh_website}}</p>
        <p>Sangh Website</p>
      </div>
    </div>
  </div>



  <ng-container *ngIf="sanghData.aaradhana_bhavan_status > -1">
    <h5>Facilities Of Sangh</h5>
    <div class="bg">

      <div class="follow-box" *ngIf="sanghData.swapna_chadawa_organised_status > -1 &&  sanghType === 'Derasar'">
        <div class="icons icon-common"><img src="/assets/images/high-school.svg"></div>
        <div>
          <p>Swapna Chadawa :
            <span
              [ngClass]="{'available': sanghData.swapna_chadawa_organised_status , 'not-available': !sanghData.swapna_chadawa_organised_status }">
              {{ sanghData.swapna_chadawa_organised_status ? 'Yes' : 'No' }}
            </span>
        </div>
      </div>

      <div class="follow-box" *ngIf="sanghData.aaradhana_bhavan_status > -1">
        <div class="icons icon-common"><img src="/assets/images/high-school.svg"></div>
        <div>
          <p>Aradhna Bhavan :
            <span
              [ngClass]="{'available': sanghData.aaradhana_bhavan_status , 'not-available': !sanghData.aaradhana_bhavan_status }">
              {{ sanghData.aaradhana_bhavan_status ? 'Yes' : 'No' }}
            </span>
        </div>
      </div>

      <div *ngIf="sanghData.pathshala_status > -1" [ngClass]="{'b-b b-t' : isPathshalaActive}">
        <div class="follow-box">
          <div class="icons icon-common"><img src="/assets/images/homeschooling.svg"></div>
          <div>
            <p>Pathshala :
              <span
                [ngClass]="{'available': sanghData.pathshala_status , 'not-available': !sanghData.pathshala_status }">
                {{ sanghData.pathshala_status ? 'Yes' : 'No' }}
              </span>
          </div>
        </div>

        <div class="follow-box" *ngIf="numberOfStudent">
          <div class="icons icon-common"><img src="/assets/images/students.svg"></div>
          <div>
            <p>{{numberOfStudent}}</p>
            <p>Number of Students</p>
          </div>
        </div>
      </div>

      <div *ngIf="sanghData.library_status > -1"
        [ngClass]="{'b-b': isLibraryActive, 'b-t': isPathshalaInactive && isLibraryActive}">
        <div class="follow-box">
          <div class="icons icon-common"><img src="/assets/images/book.svg"></div>
          <div>
            <p>Library (Gyanbhandar) :
              <span [ngClass]="{'available': sanghData.library_status , 'not-available': !sanghData.library_status }">
                {{ sanghData.library_status ? 'Yes' : 'No' }}
              </span>
          </div>
        </div>

        <div class="follow-box" *ngIf="sanghData.library_name">
          <div class="icons icon-common"><img src="/assets/images/book.svg"></div>
          <div>
            <p>{{sanghData.library_name}}</p>
            <p>Library Name</p>
          </div>
        </div>

        <div class="follow-box" *ngIf="sanghData.librarian_name">
          <div class="icons icon-common"><img src="/assets/images/libraryan.svg"></div>
          <div>
            <p>{{sanghData.librarian_name}}</p>
            <p>Libraryan Name</p>
          </div>
        </div>

        <div class="follow-box" *ngIf="sanghData.librarian_mobile_number">
          <ion-icon name="call" class="icon-common"></ion-icon>
          <div>
            <p>+91 {{sanghData.librarian_mobile_number}}</p>
            <p>Librarian Mobile number</p>
          </div>
        </div>

        <div class="follow-box" *ngIf="numberOfBook">
          <div class="icons icon-common"><img src="/assets/images/card-payment.svg"></div>
          <div>
            <p>{{numberOfBook}}</p>
            <p>Number of Books</p>
          </div>
        </div>
      </div>

      <div class="follow-box" *ngIf="sanghData.aayambilshala_status  > -1">
        <div class="icons icon-common"><img src="/assets/images/high-school.svg"></div>
        <div>
          <p>Aayambilshala :
            <span
              [ngClass]="{'available': sanghData.aayambilshala_status , 'not-available': !sanghData.aayambilshala_status }">
              {{ sanghData.aayambilshala_status ? 'Yes' : 'No' }}
            </span>
        </div>
      </div>

      <div class="follow-box" *ngIf="sanghData.bhojanshala_status > -1">
        <div class="icons icon-common"><img src="/assets/images/eat.svg"></div>
        <div>
          <p>Bhojanshala :
            <span
              [ngClass]="{'available': sanghData.bhojanshala_status , 'not-available': !sanghData.bhojanshala_status }">
              {{ sanghData.bhojanshala_status ? 'Yes' : 'No' }}
            </span>
          </p>
        </div>
      </div>

      <div class="follow-box" *ngIf="sanghData.tifin_service_status > -1">
        <div class="icons icon-common"><img src="/assets/images/tiffin.svg"></div>
        <div>
          <p>Tiffin Service :
            <span
              [ngClass]="{'available': sanghData.tifin_service_status , 'not-available': !sanghData.tifin_service_status }">
              {{ sanghData.tifin_service_status ? 'Yes' : 'No' }}
            </span>
          </p>
        </div>
      </div>

      <div class="follow-box" *ngIf="sanghData.mahila_mandal_status > -1">
        <div class="icons icon-common"><img src="/assets/images/mahila-mandal.svg"></div>
        <div>
          <p>Mahila Mandal :
            <span
              [ngClass]="{'available': sanghData.mahila_mandal_status , 'not-available': !sanghData.mahila_mandal_status }">
              {{ sanghData.mahila_mandal_status ? 'Yes' : 'No' }}
            </span>
          </p>
        </div>
      </div>

      <div class="follow-box" *ngIf="sanghData.yuva_mandal_status > -1">
        <div class="icons icon-common"><img src="/assets/images/members-group.svg"></div>
        <div>
          <p>Yuva Mandal :
            <span
              [ngClass]="{'available': sanghData.yuva_mandal_status , 'not-available': !sanghData.yuva_mandal_status }">
              {{ sanghData.yuva_mandal_status ? 'Yes' : 'No' }}
            </span>
        </div>
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="sanghData.bank_account_number || sanghData.bank_upi_id">
    <h5>Sangh Bank details</h5>
    <div class="bg">
      <div class="follow-box" *ngIf="sanghData.bank_account_number">
        <div class="icons icon-common"><img src="/assets/images/card-payment.svg"></div>
        <div>
          <p>{{sanghData.bank_account_number}}</p>
          <p>Bank account number</p>
        </div>
      </div>
      <div class="follow-box" *ngIf="sanghData.bank_ifsc">
        <div class="icons icon-common"><img src="/assets/images/card-payment.svg"></div>
        <div>
          <p>{{sanghData.bank_ifsc}}</p>
          <p>IFSC Code</p>
        </div>
      </div>
      <div class="follow-box" *ngIf="sanghData.bank_account_holder_name">
        <ion-icon name="person" class="icon-common"></ion-icon>
        <div>
          <p>{{sanghData.bank_account_holder_name}}</p>
          <p>Account Holder Name</p>
        </div>
      </div>
      <div class="follow-box" *ngIf="sanghData.bank_branch">
        <div class="icons icon-common"><img src="/assets/images/bank.svg"></div>
        <div>
          <p>{{sanghData.bank_branch}}</p>
          <p>Bank Branch</p>
        </div>
      </div>
      <div class="follow-box" *ngIf="sanghData.bank_upi_id">
        <div class="icons icon-common"><img src="/assets/images/upi.svg"></div>
        <div>
          <p>{{sanghData.bank_upi_id}}</p>
          <p>UPI ID</p>
        </div>
      </div>
    </div>
  </ng-container>

  <ng-container *ngIf="sanghData.bank_qr_code">
    <h5>QR code</h5>
    <div class="bg qr-section">
      <img class="qr-img" [src]="sanghData.bank_qr_code">
    </div>
  </ng-container>


  <ng-container *ngIf="sanghData.about">
    <h5>More About Sangh</h5>
    <div class="bg mb-10">
      <p *ngIf="sanghData.about">{{sanghData.about}}</p>
    </div>
  </ng-container>

</ion-content>