Untitled

<!-- image-selector.component.html -->
<div class="main-content">
    <div class="w3-container w3-blue">
        <h1>Card Samples</h1>
    </div>
    
    <div class="w3-row">
      <!-- Gallery -->
      <div class="w3-third w3-container">
          <div class="w3-row-padding">
              <div *ngFor="let image of galleryImages" class="w3-col s6 w3-margin-bottom">
                  <img [src]="image" class="w3-image" draggable="true" (dragstart)="onDragStart($event, image)">
              </div>
          </div>
      </div>
  
      <!-- Front and Back Boxes -->
      <div class="w3-twothird w3-container">
          <div class="w3-row">
              <div class="w3-col s12 m6 w3-margin-bottom">
                  <img [src]="frontImage" class="w3-image" (drop)="onDrop($event, 'front')" (dragover)="allowDrop($event)">
              </div>
              <div class="w3-col s12 m6 w3-margin-bottom">
                  <img [src]="backImage" class="w3-image" (drop)="onDrop($event, 'back')" (dragover)="allowDrop($event)">
              </div>
          </div>
        </div>
    
        <!-- Print Button and Dual Sided Toggle -->
        <div class="w3-row">
            <div class="w3-col s6">
                <button class="w3-button w3-blue" (click)="printCard()">Print</button>
            </div>
        </div>
    
</div>