import { defineComponent, h } from 'vue';
import htm from 'htm';
const html = htm.bind(h);

export default defineComponent({
  name: 'EventCard',
  props: { ev: { type: Object, required: true } },
  setup(props) {
    return () => {
      const a = props.ev.attrs || {};
      return html`<div class="card">
        <div class="row">
          <b>${props.ev.type}</b>
          <span class="chip muted">${props.ev.ts}</span>
          ${props.ev.decision ? html`<span class="chip">Decision: ${props.ev.decision}</span>` : ''}
          ${props.ev.error ? html`<span class="chip" style="color:#b33">Error</span>` : ''}
        </div>
        <div class="muted" style="margin-top:6px; font-size:12px;">
          ${a['User-Name'] || a['User-Name*0'] ? html`<span>User: ${a['User-Name'] || a['User-Name*0']}</span>` : ''}
          ${a['NAS-IP-Address'] ? html`<span> — NAS: ${a['NAS-IP-Address']}</span>` : ''}
          ${a['Calling-Station-Id'] ? html`<span> — STA: ${a['Calling-Station-Id']}</span>` : ''}
        </div>
      </div>`;
    };
  }
});

