reactive-mail-server/frontend/src/app/components/contacts/contacts.component.html

<div class="space-y-4">
  <h2 class="text-lg font-orbitron font-bold text-cyan-300 flex items-center gap-2">
    <i class="fa-solid fa-users text-pink-500"></i> CONTACTS
    <span class="text-sm font-mono text-slate-400 ml-auto">{{ contacts().length }} contacts</span>
  </h2>

  <!-- Форма добавления -->
  <div class="glass-panel p-5">
    <h3 class="text-sm font-orbitron font-bold text-yellow-400 mb-3 flex items-center gap-2">
      <i class="fa-solid fa-pen-to-square text-pink-500"></i> {{ editingContact() ? 'EDIT CONTACT' : 'ADD NEW CONTACT' }}
    </h3>
    <form (ngSubmit)="saveContact()" class="grid grid-cols-1 md:grid-cols-2 gap-3">
      <div>
        <label class="block text-xs font-mono text-pink-400 mb-1">NAME</label>
        <input type="text" [(ngModel)]="formName" name="name"
          class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-2.5 text-sm font-mono text-slate-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
          placeholder="John Doe">
      </div>
      <div>
        <label class="block text-xs font-mono text-pink-400 mb-1">EMAIL *</label>
        <input type="email" [(ngModel)]="formEmail" name="email" required
          class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-2.5 text-sm font-mono text-slate-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
          placeholder="john@example.com">
      </div>
      <div>
        <label class="block text-xs font-mono text-pink-400 mb-1">PHONE</label>
        <input type="text" [(ngModel)]="formPhone" name="phone"
          class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-2.5 text-sm font-mono text-slate-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
          placeholder="+1 234 567 8900">
      </div>
      <div>
        <label class="block text-xs font-mono text-pink-400 mb-1">COMPANY</label>
        <input type="text" [(ngModel)]="formCompany" name="company"
          class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-2.5 text-sm font-mono text-slate-200 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
          placeholder="Acme Corp">
      </div>
      <div class="md:col-span-2 flex gap-2">
        <button type="submit"
          class="cyber-btn px-6 py-2 rounded-xl text-xs font-bold">
          @if (editingContact()) {
            <i class="fa-solid fa-save mr-1"></i> UPDATE
          } @else {
            <i class="fa-solid fa-plus mr-1"></i> ADD
          }
        </button>
        @if (editingContact()) {
          <button type="button" (click)="cancelEdit()"
            class="px-4 py-2 rounded-xl text-xs font-mono text-slate-400 border border-slate-600/40 hover:text-slate-200 hover:border-slate-400 transition-all">
            <i class="fa-solid fa-xmark mr-1"></i> CANCEL
          </button>
        }
      </div>
    </form>
  </div>

  <!-- Список контактов -->
  <div class="glass-panel p-5">
    @if (contacts().length === 0) {
      <div class="text-center py-12 text-slate-400 font-mono">
        <i class="fa-solid fa-address-card text-4xl mb-4 text-slate-600"></i>
        <p>No contacts yet</p>
      </div>
    } @else {
      <div class="space-y-2">
        @for (contact of contacts(); track contact.id) {
          <div class="flex items-center gap-3 p-3 rounded-xl border border-cyan-500/10 hover:border-cyan-500/40 hover:bg-cyan-500/5 transition-all">
            <div class="w-10 h-10 rounded-full bg-purple-500/30 flex items-center justify-center text-cyan-400 font-bold text-lg">
              {{ (contact.name || contact.email).charAt(0).toUpperCase() }}
            </div>
            <div class="flex-1 min-w-0">
              <div class="font-mono text-slate-200 truncate">{{ contact.name || '(No name)' }}</div>
              <div class="text-xs text-slate-400 font-mono truncate">{{ contact.email }}</div>
              @if (contact.phone || contact.company) {
                <div class="text-xs text-slate-500 font-mono">
                  @if (contact.company) {
                    {{ contact.company }}
                  }
                  @if (contact.company && contact.phone) {
                    &nbsp;•&nbsp;
                  }
                  @if (contact.phone) {
                    {{ contact.phone }}
                  }
                </div>
              }
            </div>
            <div class="flex gap-1">
              <button (click)="editContact(contact)"
                class="px-2 py-1 text-xs font-mono text-cyan-400 hover:bg-cyan-500/10 rounded-lg transition-all">
                <i class="fa-solid fa-pen"></i>
              </button>
              <button (click)="deleteContact(contact.id!)"
                class="px-2 py-1 text-xs font-mono text-pink-400 hover:bg-pink-500/10 rounded-lg transition-all">
                <i class="fa-solid fa-trash"></i>
              </button>
            </div>
          </div>
        }
      </div>
    }
  </div>
</div>