{{--
    Pending Project Card
    ====================
    Self-contained partial; mirrors the target_freelancer card style used on the
    add-project page.  Because the project data lives in localStorage (not a Blade
    variable), the card is rendered with empty placeholder elements that a small
    inline script on the host page fills in at runtime.

    Usage:
        @include('front.project._pending_project_card')

    The host page is responsible for the JS that:
      - reads localStorage['pendingProjectData']
      - populates #pending-project-title / #pending-project-desc
      - sets #pending-project-card to display:block
      - hides the role-selection UI
      - wires #cancel-pending-project-btn
--}}
<style>
    .pending-project-card {
        background: #fff;
        border: 1px solid #e0ede6;
        /* border-radius: 10px; */
        padding: 18px 16px 16px;
        margin-bottom: 20px;
        position: relative;
        direction: rtl;
    }

    .pending-project-label {
        display: inline-block;
        background: linear-gradient(135deg, #e6f7ef 0%, #d1f0e0 100%);
        color: #14965a;
        font-size: 11px;
        font-weight: 700;
        font-family: var(--font-body);
        padding: 3px 10px;
        border-radius: 20px;
        margin-bottom: 10px;
        letter-spacing: 0.3px;
    }

    .pending-project-title {
        font-size: 15px;
        font-weight: 700;
        color: #222;
        font-family: var(--font-body);
        margin: 0 0 8px;
        line-height: 1.5;
    }

    .pending-project-desc {
        font-size: 13px;
        color: #666;
        font-family: var(--font-body);
        line-height: 1.7;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pending-project-cancel-btn {
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px;
        font-size: 12px;
        font-family: var(--font-body);
        font-weight: 600;
        cursor: pointer;
        /* border-radius: 4px; */
        background: #fff;
        border: 1px solid #e3e3e3;
        color: #555;
        transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .pending-project-cancel-btn:hover {
        background: #fff5f5;
        border-color: #f87171;
        color: #dc2626;
    }

    .pending-project-cancel-btn svg {
        flex-shrink: 0;
    }
</style>

<div id="pending-project-card" class="pending-project-card" style="display:none;">
    <button type="button"
            id="cancel-pending-project-btn"
            class="pending-project-cancel-btn"
            title="إلغاء المشروع والعودة لتسجيل عادي">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
             fill="none" stroke="currentColor" stroke-width="2.5"
             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M18 6L6 18"></path>
            <path d="M6 6l12 12"></path>
        </svg>
        إلغاء المشروع
    </button>

    <span class="pending-project-label">مشروعك في الانتظار</span>
    <h4 class="pending-project-title" id="pending-project-title"></h4>
    <p class="pending-project-desc" id="pending-project-desc"></p>
</div>