<%
  var _addr     = locals.address  || {};
  var _selected = locals.selected || false;
  var _editHref = locals.editHref || null;
  var _deleteAction = locals.deleteAction || null;

  var cityLine    = [_addr.city, _addr.state, _addr.postalCode].filter(Boolean).join(', ');
  var countryLine = [_addr.country, _addr.countryCode ? '(' + _addr.countryCode + ')' : ''].filter(Boolean).join(' ');
  var borderClass = _selected
    ? 'border-primary ring-2 ring-primary ring-offset-1'
    : 'border-border';
%>
<div class="relative rounded-lg border bg-surface-raised p-4 space-y-2 transition-colors <%= borderClass %><%= locals.className ? ' ' + locals.className : '' %>">
  <% if (_selected !== undefined) { %>
  <span aria-hidden="true" class="absolute top-3 right-3 flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors <%= _selected ? 'border-primary bg-primary' : 'border-border bg-surface-base' %>">
    <% if (_selected) { %><span class="h-1.5 w-1.5 rounded-full bg-white"></span><% } %>
  </span>
  <% } %>

  <% if (_addr.fullName) { %>
  <div class="flex items-center gap-2 text-sm font-medium text-text-primary">
    <i class="fa-solid fa-user w-3 h-3 text-text-disabled shrink-0" aria-hidden="true"></i>
    <%= _addr.fullName %>
  </div>
  <% } %>

  <div class="flex items-start gap-2 text-sm text-text-secondary">
    <i class="fa-solid fa-location-dot w-3 h-3 text-text-disabled shrink-0 mt-0.5" aria-hidden="true"></i>
    <div class="space-y-0.5">
      <p><%= _addr.addressLine1 %></p>
      <% if (_addr.addressLine2) { %><p><%= _addr.addressLine2 %></p><% } %>
      <% if (cityLine)           { %><p><%= cityLine %></p><% } %>
      <% if (countryLine)        { %><p><%= countryLine %></p><% } %>
    </div>
  </div>

  <% if (_addr.phone) { %>
  <div class="flex items-center gap-2 text-sm text-text-secondary">
    <i class="fa-solid fa-phone w-3 h-3 text-text-disabled shrink-0" aria-hidden="true"></i>
    <%= _addr.phone %>
  </div>
  <% } %>

  <% if (_editHref || _deleteAction) { %>
  <div class="flex gap-2 pt-2 border-t border-border">
    <% if (_editHref) { %>
    <%- include('../../../ui/Button', {
      element: 'a',
      variant: 'ghost',
      size: 'xs',
      href: _editHref,
      className: 'text-primary hover:text-primary-hover',
      children: 'Edit'
    }) %>
    <% } %>
    <% if (_deleteAction) { %>
    <form action="<%= _deleteAction %>" method="post" onsubmit="return confirm('Delete this address?')">
      <%- include('../../../ui/Button', {
        type: 'submit',
        variant: 'ghost',
        size: 'xs',
        className: 'text-error hover:opacity-80',
        children: 'Delete'
      }) %>
    </form>
    <% } %>
  </div>
  <% } %>
</div>