{{--
    Task #39597 (BR-C02) — hộp error「LINEログインチャネル の値が Messaging APIチャネル と trùng」.
    Dùng chung SCR-21 (PC接続 Step4) + SCR-24 (クイック接続 Card ②) — cùng style / nội dung / a11y
    (spec-change-add-bot §3 CR-02, technical-spec §1 "UI behavior & permission").

    Params:
      $cond  (bắt buộc) — biểu thức Vue điều khiển hiển thị, vd 'duplicateError.loginChannelId'
      $field ('id' | 'secret') — chọn nội dung lỗi. Default 'id' = bản đầy đủ (LUẬT L9).

    Vị trí đặt: NGAY dưới input, TRÊN help/breadcrumb (thứ tự chốt ở QA-spec-006 / A-07).
--}}
@php
    $field = $field ?? 'id';
    $dupMessage = $field === 'secret'
        ? 'Messaging APIチャネルのチャネルシークレットが入力されています。LINE Developersで作成したLINEログインチャネルのチャネルシークレットを入力してください。'
        : 'Messaging APIチャネルのチャネルIDが入力されています。LINE Developersで作成したLINEログインチャネルのチャネルIDを入力してください。';
@endphp
<div v-if="{{ $cond }}" class="dup-error-box" role="alert">
    <lme-icon color="#A10000" size="14" class="dup-error-icon">
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.00245 2.25203L1.06162 10.5004C0.959749 10.6768 0.905848 10.8768 0.905278 11.0805C0.904708 11.2842 0.957487 11.4845 1.05837 11.6615C1.15925 11.8385 1.30471 11.986 1.48028 12.0893C1.65585 12.1926 1.85542 12.2481 2.05912 12.2504H11.9408C12.1445 12.2481 12.344 12.1926 12.5196 12.0893C12.6952 11.986 12.8407 11.8385 12.9415 11.6615C13.0424 11.4845 13.0952 11.2842 13.0946 11.0805C13.0941 10.8768 13.0402 10.6768 12.9383 10.5004L7.99745 2.25203C7.89346 2.08059 7.74704 1.93885 7.57231 1.84048C7.39759 1.74211 7.20046 1.69043 6.99995 1.69043C6.79944 1.69043 6.60231 1.74211 6.42759 1.84048C6.25286 1.93885 6.10644 2.08059 6.00245 2.25203Z" stroke="#A10000" stroke-width="1.16667" stroke-linejoin="round"/>
            <path d="M7 5.25V7.58333M7 9.91667H7.00583" stroke="#A10000" stroke-width="1.16667" stroke-linecap="round"/>
        </svg>
    </lme-icon>
    <span class="dup-error-text">{{ $dupMessage }}</span>
</div>