<div id="{{ plugin_name }}-item-{{ entry.id }}" class="bg-slate-50 rounded-lg p-4 border border-slate-200 hover:shadow-md transition-all duration-200 group">
  <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
    <div class="flex-1">
      <div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-2">
        {% if entry.company_url %}
          <h3 class="text-lg font-semibold text-slate-800">
            <a href="{{ entry.company_url }}" class="text-blue-600 hover:text-blue-800 underline decoration-blue-300 hover:decoration-blue-500 transition-colors">
              {{ entry.company_name }}
            </a>
          </h3>
        {% else %}
          <h3 class="text-lg font-semibold text-slate-800">{{ entry.company_name }}</h3>
        {% endif %}
        
        {% if entry.badges %}
          <div class="flex flex-wrap gap-1">
            {% for badge in entry.badges %}
              <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
                {{ badge }}
              </span>
            {% endfor %}
          </div>
        {% endif %}
      </div>
      
      <div class="text-sm font-medium text-slate-600 mb-2">{{ entry.role }}</div>
      <div class="prose prose-slate prose-sm max-w-none text-slate-700">{{ entry.description|safe }}</div>
    </div>
    
    <div class="flex items-center gap-3">
      <div class="text-sm text-slate-500 font-medium whitespace-nowrap">
        {{ entry.start }} - {{ entry.end }}
      </div>
      
      {% if show_edit_button %}
        <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          <button
            class="p-1 text-slate-500 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors duration-200"
            hx-get="{{ entry.edit_url }}"
            hx-target="#{{ plugin_name }}-item-{{ entry.id }}"
            hx-swap="outerHTML"
            title="Edit entry"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5M16 3l5 5L9 20H4v-5L16 3z"></path>
            </svg>
          </button>
          <button
            class="p-1 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded transition-colors duration-200"
            hx-delete="{{ entry.delete_url }}"
            hx-target="#{{ plugin_name }}-item-{{ entry.id }}"
            hx-swap="delete"
            hx-confirm="Are you sure you want to delete this entry?"
            title="Delete entry"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
            </svg>
          </button>
        </div>
      {% endif %}
    </div>
  </div>
</div>