<aside class="dark-sidebar">
  <!-- Sidebar Header -->
  <div class="sidebar-header">
    <div class="brand">
      <span class="brand-mark"></span>
      <h2>{{ 'app.title' | translate }}</h2>
    </div>
  </div>

  <!-- Drawing Controls -->
  <div class="drawing-controls">
    <h3 class="section-title">{{ 'map.tools' | translate }}</h3>

    <button class="btn-draw-point" (click)="onCreatePoint()" [disabled]="drawingPolygon">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
        <circle cx="12" cy="10" r="3"></circle>
      </svg>
      <span>{{ 'map.create_point' | translate }}</span>
    </button>

    <button class="btn-draw-zone" (click)="onStartZone()" [disabled]="drawingPoint">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
        <path d="M2 17l10 5 10-5M2 12l10 5 10-5"></path>
      </svg>
      <span>{{ 'map.start_zone' | translate }}</span>
    </button>

    <button class="btn-finish-zone" *ngIf="drawingPolygon" (click)="onFinishZone()">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polyline points="20 6 9 17 4 12"></polyline>
      </svg>
      <span>{{ 'map.finish_zone' | translate }}</span>
    </button>
  </div>

  <!-- Info Section -->
  <div class="info-section">
    <div class="info-card">
      <div class="info-icon">📍</div>
      <div class="info-content">
        <span class="info-label">{{ 'map.click_to_create' | translate }}</span>
        <span class="info-value">{{ 'map.points_zones' | translate }}</span>
      </div>
    </div>

    <div class="info-card" *ngIf="drawingPolygon">
      <div class="info-icon">✏️</div>
      <div class="info-content">
        <span class="info-label">{{ 'map.drawing_mode' | translate }}</span>
        <span class="info-value">{{ 'map.zone_active' | translate }}</span>
      </div>
    </div>

    <div class="info-card" *ngIf="drawingPoint">
      <div class="info-icon">📌</div>
      <div class="info-content">
        <span class="info-label">{{ 'map.drawing_mode' | translate }}</span>
        <span class="info-value">{{ 'map.point_active' | translate }}</span>
      </div>
    </div>
  </div>
</aside>
