{% extends "Profile/show/layout.html.twig" %}

{% trans_default_domain "Social" %}

{% set isOwner = app.user is not null and app.user.id == user.id %}

{% block schemaBlock %}
    {% if user.publicProfile %}
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "ProfilePage",
                "dateCreated": "{{ user.createdAt ? user.createdAt|date('c') : '' }}",
                "mainEntity": {
                    "@type": "Person",
                    "name": "{{ user.firstName ~ ' ' ~ user.lastName }}",
                    "identifier": "{{ user.username }}",
                    "interactionStatistic": [{
                        "@type": "InteractionCounter",
                        "interactionType": "https://schema.org/FollowAction",
                        "userInteractionCount": {{ user.followersCount }}
                    }],
                    "description": "{% if user.bio is not null %}{{ user.bio|e('js') }}{% else %}{{ (user.firstName ~ ' ' ~ user.lastName)|e('js') }}{% endif %}",
                    {% if user.image and not (user.image starts with 'default_profile_pic') %}
                    "image": "{{ absolute_url(asset('uploads/profile/img/' ~ user.image)) }}",
                    {% endif %}
                    "sameAs": [
                        {% if user.facebookUrl %}"{{ user.facebookUrl }}"{% if user.linkedinUrl %},{% endif %}{% endif %}
                        {% if user.linkedinUrl %}"{{ user.linkedinUrl }}"{% endif %}
                    ]
                }
            }
        </script>
    {% endif %}
{% endblock %}

{% block profileStyles %}
<style>
    :root {
        --primary-color: #00A550;
        --primary-hover: #008844;
        --primary-bg: #e8f5e9;
        --accent-color: #ff8600;
        --text-color: #333;
        --text-muted: #666;
        --text-light: #999;
        --border-color: #e0e0e0;
        --bg-light: #f8f9fa;
        --bg-page: #f0f2f5;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
        --radius: 12px;
        --radius-sm: 8px;
    }

    .profile-page { background: var(--bg-page); min-height: 100vh; padding-top: 20px; padding-bottom: 40px; }

    /* ===== Hero Card ===== */
    .profile-hero {
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
        margin-bottom: 24px;
    }
    .profile-cover {
        height: 180px;
        background: linear-gradient(135deg, #00A550 0%, #00C853 50%, #69F0AE 100%);
        position: relative;
    }
    .profile-hero-body {
        padding: 0 24px 24px;
        position: relative;
    }
    .profile-avatar-wrap {
        margin-top: -52px;
        display: flex;
        align-items: flex-end;
        gap: 20px;
        flex-wrap: wrap;
    }
    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 4px solid white;
        box-shadow: var(--shadow-sm);
        object-fit: cover;
        background: white;
    }
    .profile-avatar-container {
        position: relative;
        flex-shrink: 0;
    }
    .profile-avatar-edit {
        position: absolute;
        bottom: 4px;
        right: 4px;
        background: rgba(0,0,0,0.7);
        color: white;
        border: 2px solid white;
        border-radius: 50%;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.2s;
    }
    .profile-avatar-edit:hover { background: rgba(0,0,0,0.9); }
    .profile-identity { flex: 1; min-width: 200px; padding-top: 8px; }
    .profile-name {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-color);
        margin: 0 0 2px;
        line-height: 1.3;
    }
    .profile-username {
        font-size: 14px;
        color: var(--text-muted);
        margin: 0 0 6px;
    }
    .profile-tagline {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .profile-tagline i { color: var(--primary-color); width: 14px; text-align: center; }
    .profile-bio {
        font-size: 14px;
        line-height: 1.7;
        color: var(--text-color);
        margin: 10px 0 0;
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* Stats bar */
    .profile-stats-bar {
        display: flex;
        gap: 24px;
        padding: 16px 0 0;
        margin-top: 16px;
        border-top: 1px solid var(--border-color);
        flex-wrap: wrap;
    }
    .profile-stat {
        text-decoration: none;
        color: var(--text-color);
        font-size: 14px;
        transition: color 0.2s;
    }
    .profile-stat:hover { color: var(--primary-color); text-decoration: none; }
    .profile-stat strong { font-size: 17px; font-weight: 700; }
    .profile-stat span { color: var(--text-muted); }

    /* Action buttons */
    .profile-actions {
        display: flex;
        gap: 10px;
        padding-top: 8px;
        flex-wrap: wrap;
    }
    .btn-profile-follow {
        padding: 8px 28px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        border: 2px solid var(--primary-color);
        cursor: pointer;
        transition: all 0.3s;
    }
    .btn-profile-follow.follow { background: var(--primary-color); color: white; }
    .btn-profile-follow.follow:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
    .btn-profile-follow.following-state { background: white; color: var(--primary-color); }
    .btn-profile-follow.following-state:hover { background: #ffe0e0; color: #dc3545; border-color: #dc3545; }
    .btn-profile-edit {
        padding: 8px 24px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        border: 2px solid var(--border-color);
        background: white;
        color: var(--text-color);
        cursor: pointer;
        transition: all 0.3s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-profile-edit:hover { border-color: var(--primary-color); color: var(--primary-color); text-decoration: none; }
    .btn-profile-settings {
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        border: 2px solid var(--border-color);
        background: white;
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.3s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-profile-settings:hover { border-color: var(--text-color); color: var(--text-color); text-decoration: none; }

    /* ===== Two-Column Layout ===== */
    .profile-content { display: flex; gap: 24px; }
    .profile-main { flex: 1; min-width: 0; }
    .profile-sidebar { width: 320px; flex-shrink: 0; }

    /* ===== Sidebar Cards ===== */
    .sidebar-card {
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 20px;
        margin-bottom: 16px;
    }
    .sidebar-card h3 {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-color);
        margin: 0 0 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .sidebar-card h3 i { color: var(--primary-color); font-size: 15px; }

    /* About items */
    .about-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 0;
        font-size: 13px;
        color: var(--text-color);
    }
    .about-item i { color: var(--text-muted); width: 16px; text-align: center; margin-top: 2px; flex-shrink: 0; }
    .about-item a { color: var(--primary-color); text-decoration: none; word-break: break-all; }
    .about-item a:hover { text-decoration: underline; }

    /* Interests tags */
    .interest-tag {
        display: inline-block;
        padding: 4px 12px;
        margin: 3px;
        background: var(--primary-bg);
        color: var(--primary-color);
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s;
    }
    .interest-tag:hover { background: var(--primary-color); color: white; text-decoration: none; }

    /* Research list */
    .research-item {
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }
    .research-item:last-child { border-bottom: none; }
    .research-item a {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
        text-decoration: none;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .research-item a:hover { color: var(--primary-color); }
    .research-item .research-meta {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 4px;
    }
    .research-item .research-meta i { margin-inline-end: 4px; }
    .sidebar-view-all {
        display: block;
        text-align: center;
        padding: 10px;
        font-size: 13px;
        color: var(--primary-color);
        text-decoration: none;
        border-top: 1px solid #f0f0f0;
        margin: 12px -20px -20px;
        border-radius: 0 0 var(--radius) var(--radius);
        transition: background 0.2s;
    }
    .sidebar-view-all:hover { background: var(--bg-light); text-decoration: none; }

    /* ===== Feed on profile ===== */
    .profile-composer {
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 16px 20px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .profile-composer-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
    .profile-composer-input {
        flex: 1;
        background: var(--bg-light);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        padding: 10px 18px;
        font-size: 14px;
        color: var(--text-muted);
        cursor: pointer;
        transition: border-color 0.2s;
    }
    .profile-composer-input:hover { border-color: var(--primary-color); }

    /* Feed tabs for profile */
    .profile-feed-tabs {
        display: flex;
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        margin-bottom: 16px;
        overflow: hidden;
    }
    .profile-feed-tab {
        flex: 1;
        padding: 12px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-muted);
        text-align: center;
        cursor: pointer;
        border: none;
        background: none;
        border-bottom: 3px solid transparent;
        transition: all 0.3s;
    }
    .profile-feed-tab:hover { color: var(--primary-color); background: #f9f9f9; }
    .profile-feed-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: #f0fff5; }

    /* Post cards */
    .post-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 16px; border: 1px solid transparent; transition: all 0.3s; }
    .post-card:hover { box-shadow: var(--shadow-md); border-color: #e8f5e9; }
    .post-card-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
    .post-author-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
    .post-author-info { flex: 1; }
    .post-author-info a { color: var(--text-color); font-weight: 600; font-size: 14px; text-decoration: none; }
    .post-author-info a:hover { color: var(--primary-color); }
    .post-author-info .post-time { font-size: 12px; color: var(--text-muted); }
    .post-card-badge { font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 500; }
    .post-card-badge.paper-share { background: var(--primary-bg); color: var(--primary-color); }
    .post-card-badge.pinned { background: #fce4ec; color: #e91e63; }
    .post-card-body { padding: 12px 20px; }
    .post-content { font-size: 14px; line-height: 1.7; color: var(--text-color); white-space: pre-wrap; word-break: break-word; }
    .post-image { width: 100%; max-height: 500px; object-fit: cover; margin-top: 12px; border-radius: 8px; }
    .shared-research { display: flex; gap: 12px; padding: 12px; margin-top: 12px; background: var(--bg-light); border-radius: 8px; border: 1px solid var(--border-color); text-decoration: none; transition: all 0.3s; }
    .shared-research:hover { border-color: var(--primary-color); text-decoration: none; }
    .shared-research-icon { width: 48px; height: 48px; background: var(--primary-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .shared-research-icon i { font-size: 20px; color: var(--primary-color); }
    .shared-research-info { flex: 1; min-width: 0; }
    .shared-research-info h5 { margin: 0 0 4px; font-size: 14px; color: var(--text-color); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .shared-research-info span { font-size: 12px; color: var(--text-muted); }
    .post-card-actions { display: flex; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--border-color); }
    .post-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 6px; font-size: 13px; color: var(--text-muted); background: none; border: none; cursor: pointer; transition: all 0.3s; text-decoration: none; }
    .post-action-btn:hover { background: var(--bg-light); color: var(--text-color); text-decoration: none; }
    .post-action-btn.liked { color: #e91e63; }

    /* Post menu */
    .post-menu { position: relative; margin-inline-start: auto; }
    .post-menu-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 50%; font-size: 16px; }
    .post-menu-btn:hover { background: var(--bg-light); }
    .post-menu-dropdown { display: none; position: absolute; top: 100%; right: 0; background: white; border-radius: 8px; box-shadow: var(--shadow-md); border: 1px solid var(--border-color); min-width: 160px; z-index: 100; overflow: hidden; }
    html[dir="rtl"] .post-menu-dropdown { left: 0; right: auto; }
    .post-menu-dropdown.show { display: block; }
    .post-menu-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; font-size: 13px; color: var(--text-color); background: none; border: none; cursor: pointer; }
    .post-menu-dropdown button:hover { background: var(--bg-light); }
    .post-menu-dropdown .menu-delete { color: #d32f2f; }
    .post-menu-dropdown .menu-delete:hover { background: #ffebee; }

    /* Compose modal */
    .compose-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1050; justify-content: center; align-items: center; }
    .compose-overlay.active { display: flex; }
    .compose-modal { background: white; border-radius: var(--radius); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md); }
    .compose-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
    .compose-modal-header h3 { margin: 0; font-size: 16px; }
    .compose-modal-close { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: 50%; }
    .compose-modal-close:hover { background: var(--bg-light); }
    .compose-modal-body { padding: 20px; }
    .compose-textarea { width: 100%; min-height: 120px; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; font-size: 14px; line-height: 1.6; resize: vertical; outline: none; font-family: inherit; }
    .compose-textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0,165,80,0.1); }
    .compose-visibility select { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 13px; outline: none; }
    .compose-modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border-color); }
    .btn-cancel-compose { padding: 8px 20px; border-radius: 8px; border: 1px solid var(--border-color); background: white; color: var(--text-muted); cursor: pointer; font-size: 14px; }
    .btn-publish { padding: 8px 24px; border-radius: 8px; border: none; background: var(--primary-color); color: white; cursor: pointer; font-size: 14px; font-weight: 500; }
    .btn-publish:hover { background: var(--primary-hover); }
    .btn-publish:disabled { background: #ccc; cursor: default; }
    .image-preview { margin-top: 12px; position: relative; display: none; }
    .image-preview img { max-width: 100%; border-radius: 8px; max-height: 300px; object-fit: contain; }
    .image-preview .remove-image { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; cursor: pointer; }

    /* Edit post modal */
    .edit-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
    .edit-overlay.active { display: flex; }
    .edit-modal { background: white; border-radius: var(--radius); width: 90%; max-width: 560px; box-shadow: var(--shadow-md); overflow: hidden; }
    .edit-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
    .edit-modal-header h4 { margin: 0; font-size: 16px; }
    .edit-modal-close { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; }
    .edit-modal-body textarea { width: 100%; min-height: 120px; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; font-size: 14px; resize: vertical; outline: none; font-family: inherit; margin: 0; }
    .edit-modal-body textarea:focus { border-color: var(--primary-color); }
    .edit-modal-body { padding: 20px; }
    .edit-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border-color); }
    .edit-modal-footer button { padding: 8px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; }
    .edit-cancel-btn { background: var(--bg-light); color: var(--text-color); }
    .edit-save-btn { background: var(--primary-color); color: white; }
    .edit-save-btn:hover { background: var(--primary-hover); }

    /* Loading & empty */
    .feed-loading { text-align: center; padding: 40px; color: var(--text-muted); }
    .feed-loading i { font-size: 24px; animation: spin 1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .profile-empty-state {
        text-align: center;
        padding: 60px 20px;
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }
    .profile-empty-state i { font-size: 48px; color: #ddd; margin-bottom: 16px; display: block; }
    .profile-empty-state p { color: var(--text-muted); font-size: 14px; }

    /* ===== Responsive ===== */
    @media (max-width: 991px) {
        .profile-content { flex-direction: column; }
        .profile-sidebar { width: 100%; order: -1; }
        .profile-sidebar .sidebar-card.about-card { display: none; }
    }
    @media (max-width: 767px) {
        .profile-cover { height: 120px; }
        .profile-hero-body { padding: 0 16px 16px; }
        .profile-avatar { width: 90px; height: 90px; }
        .profile-avatar-wrap { margin-top: -40px; gap: 14px; }
        .profile-name { font-size: 20px; }
        .profile-stats-bar { gap: 16px; }
        .profile-stat strong { font-size: 15px; }
        .post-card-header { padding: 12px 16px 0; }
        .post-card-body { padding: 10px 16px; }
    }
</style>
{% endblock %}

{% block page %}
<div class="profile-page">
    <div class="container">

        {# ===== HERO CARD ===== #}
        <div class="profile-hero">
            <div class="profile-cover"></div>
            <div class="profile-hero-body">
                <div class="profile-avatar-wrap">
                    <div class="profile-avatar-container">
                        <img src="{{ user.webPath }}" alt="{{ user.firstName }}" class="profile-avatar" id="heroAvatar">
                        {% if isOwner %}
                            <button class="profile-avatar-edit" onclick="document.getElementById('avatarFileInput').click()" title="{{ 'profile.change_photo'|trans }}">
                                <i class="fa fa-camera"></i>
                            </button>
                            <input type="file" id="avatarFileInput" accept="image/jpeg,image/png,image/gif" style="display:none" onchange="uploadAvatar(this)">
                        {% endif %}
                    </div>
                    <div class="profile-identity">
                        <h1 class="profile-name">{{ user.firstName ~ ' ' ~ user.lastName }}</h1>
                        <p class="profile-username">{{ '@' ~ user.username }}</p>
                        <div class="profile-tagline">
                            {% if user.studyDegree %}
                                <span><i class="fa fa-graduation-cap"></i> {{ ('profile.degree_' ~ user.studyDegree)|trans }}</span>
                            {% endif %}
                            {% if user.work %}
                                <span><i class="fa fa-briefcase"></i> {{ user.work }}</span>
                            {% endif %}
                            {% if user.studyField %}
                                <span><i class="fa fa-flask"></i> {{ user.studyField }}</span>
                            {% endif %}
                            {% if user.country %}
                                <span><i class="fa fa-map-marker"></i> {{ user.country }}</span>
                            {% endif %}
                        </div>
                        {% if user.bio %}
                            <div class="profile-bio" id="profileBio">{{ user.bio }}</div>
                        {% endif %}
                    </div>
                </div>

                {# Action buttons #}
                <div class="profile-actions">
                    {% if app.user is not null and app.user.id != user.id %}
                        <button class="btn-profile-follow {{ app.user.isFollowing(user) ? 'following-state' : 'follow' }}"
                                id="heroFollowBtn"
                                data-user-id="{{ user.id }}"
                                onclick="toggleProfileFollow(this)">
                            {% if app.user.isFollowing(user) %}
                                <i class="fa fa-check"></i> {{ 'social.following'|trans }}
                            {% else %}
                                <i class="fa fa-plus"></i> {{ 'social.follow'|trans }}
                            {% endif %}
                        </button>
                    {% endif %}
                    {% if isOwner %}
                        <a href="{{ path('user_profile_playground', {'username': user.username}) }}" class="btn-profile-settings">
                            <i class="fa fa-magic"></i> {{ 'profile.playground_btn'|trans }}
                        </a>
                        <a href="{{ path('app_settings_profile') }}" class="btn-profile-settings">
                            <i class="fa fa-cog"></i> {{ 'profile.settings_btn'|trans }}
                        </a>
                    {% endif %}
                    {% if not app.user or app.user.id != user.id %}
                        <button class="btn-profile-edit" onclick="shareProfileLink()" title="{{ 'social.share'|trans }}">
                            <i class="fa fa-share-alt"></i>
                        </button>
                    {% endif %}
                </div>

                {# Stats bar #}
                <div class="profile-stats-bar">
                    <a href="{{ path('user_followers', {'username': user.username}) }}" class="profile-stat">
                        <strong id="followersCountDisplay">{{ user.followersCount }}</strong> <span>{{ 'social.followers'|trans }}</span>
                    </a>
                    <a href="{{ path('user_following', {'username': user.username}) }}" class="profile-stat">
                        <strong>{{ user.followingCount }}</strong> <span>{{ 'social.following_list'|trans }}</span>
                    </a>
                    <span class="profile-stat">
                        <strong>{{ postsCount is defined ? postsCount : 0 }}</strong> <span>{{ 'profile.posts_count'|trans }}</span>
                    </span>
                    {% if matchedResearches is defined and matchedResearches is not empty %}
                    <span class="profile-stat">
                        <strong>{{ matchedResearches|length }}</strong> <span>{{ 'profile.papers_count'|trans }}</span>
                    </span>
                    {% endif %}
                </div>
            </div>
        </div>

        {# ===== CONTENT: FEED + SIDEBAR ===== #}
        <div class="profile-content">

            {# ---- Main Feed Column ---- #}
            <div class="profile-main">

                {# Post composer — owner only #}
                {% if isOwner %}
                <div class="profile-composer" onclick="openProfileComposer()">
                    <img src="{{ avatarUrl }}" alt="" class="profile-composer-avatar">
                    <div class="profile-composer-input">
                        {{ 'social.whats_on_your_mind'|trans }}
                    </div>
                </div>
                {% endif %}

                {# Feed tabs #}
                <div class="profile-feed-tabs">
                    <button class="profile-feed-tab active" data-tab="posts" onclick="switchProfileTab(this, 'posts')">
                        <i class="fa fa-pencil-square-o"></i> {{ 'profile.tab_posts'|trans }}
                    </button>
                    <button class="profile-feed-tab" data-tab="papers" onclick="switchProfileTab(this, 'papers')">
                        <i class="fa fa-file-text-o"></i> {{ 'profile.tab_papers'|trans }}
                    </button>
                </div>

                {# Posts container (loaded via API) #}
                <div id="profile-posts-container"></div>

                {# Papers container (server-rendered, hidden by default) #}
                <div id="profile-papers-container" style="display:none;">
                    {% if matchedResearches is defined and matchedResearches is not empty %}
                        {% for research in matchedResearches %}
                            {% set contributers = research.contributers %}
                            <div class="post-card" style="padding: 16px 20px;">
                                <a href="{{ path('shamra_academia_research_show', { slug: research.slug }) }}" style="color: var(--text-color); text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.6; display: block;">
                                    {% if app.request.locale == "en" and research.englishTitle is not null and research.englishTitle != "" %}
                                        {{ research.englishTitle }}
                                    {% else %}
                                        {{ research.arabicTitle }}
                                    {% endif %}
                                </a>
                                {% if research.abstract %}
                                    <p style="font-size: 13px; color: var(--text-muted); margin: 8px 0 0; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;">
                                        {{ research.abstract|slice(0, 250) }}
                                    </p>
                                {% endif %}
                                <div style="margin-top: 10px; font-size: 12px; color: var(--text-light);">
                                    <i class="fa fa-eye"></i> {{ research.hits }}
                                    {% if contributers|length > 0 %}
                                        &middot; {{ contributers|join(', ') }}
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                        <div style="text-align: center; padding: 16px;">
                            <a href="{{ path('shamra_academia_filter', {'createdBy': user.username}) }}" style="color: var(--primary-color); font-size: 14px; text-decoration: none;">
                                {{ 'profile.view_all_papers'|trans }} &rarr;
                            </a>
                        </div>
                    {% else %}
                        <div class="profile-empty-state">
                            <i class="fa fa-file-text-o"></i>
                            <p>{{ 'profile.no_papers'|trans }}</p>
                        </div>
                    {% endif %}
                </div>

                {# Loading #}
                <div id="profile-feed-loading" class="feed-loading" style="display: none;">
                    <i class="fa fa-spinner"></i>
                    <p>{{ 'social.loading'|trans }}</p>
                </div>

                {# Empty state for posts #}
                <div id="profile-feed-empty" class="profile-empty-state" style="display: none;">
                    <i class="fa fa-pencil-square-o"></i>
                    <p>{{ 'profile.no_posts_yet'|trans }}</p>
                </div>
            </div>

            {# ---- Sidebar ---- #}
            <div class="profile-sidebar">

                {# About card #}
                <div class="sidebar-card about-card">
                    <h3><i class="fa fa-info-circle"></i> {{ 'profile.about'|trans }}</h3>

                    {% if user.bio %}
                        <div class="about-item" style="display: block; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; margin-bottom: 8px;">
                            <div style="font-size: 13px; color: var(--text-color); line-height: 1.6; white-space: pre-wrap;">{{ user.bio }}</div>
                        </div>
                    {% endif %}

                    {% if user.studyDegree %}
                        <div class="about-item">
                            <i class="fa fa-graduation-cap"></i>
                            <span>{{ ('profile.degree_' ~ user.studyDegree)|trans }}</span>
                        </div>
                    {% endif %}
                    {% if user.studyField %}
                        <div class="about-item">
                            <i class="fa fa-flask"></i>
                            <span>{{ user.studyField }}</span>
                        </div>
                    {% endif %}
                    {% if user.work %}
                        <div class="about-item">
                            <i class="fa fa-briefcase"></i>
                            <span>{{ user.work }}</span>
                        </div>
                    {% endif %}
                    {% if user.country %}
                        <div class="about-item">
                            <i class="fa fa-map-marker"></i>
                            <span>{{ user.country }}</span>
                        </div>
                    {% endif %}
                    {% if user.address %}
                        <div class="about-item">
                            <i class="fa fa-home"></i>
                            <span>{{ user.address }}</span>
                        </div>
                    {% endif %}
                    {% if user.facebookUrl %}
                        <div class="about-item">
                            <i class="fa fa-facebook"></i>
                            <a href="{{ user.facebookUrl }}" target="_blank" rel="noopener">Facebook</a>
                        </div>
                    {% endif %}
                    {% if user.linkedinUrl %}
                        <div class="about-item">
                            <i class="fa fa-linkedin"></i>
                            <a href="{{ user.linkedinUrl }}" target="_blank" rel="noopener">LinkedIn</a>
                        </div>
                    {% endif %}
                    {% if isOwner and user.email %}
                        <div class="about-item">
                            <i class="fa fa-envelope"></i>
                            <a href="mailto:{{ user.email }}">{{ user.email }}</a>
                        </div>
                    {% endif %}
                    {% if user.createdAt %}
                        <div class="about-item">
                            <i class="fa fa-calendar"></i>
                            <span>{{ 'profile.joined'|trans }} {{ user.createdAt|date('M Y') }}</span>
                        </div>
                    {% endif %}
                </div>

                {# Interests #}
                {% if user.interests|length > 0 %}
                <div class="sidebar-card">
                    <h3><i class="fa fa-tags"></i> {{ 'profile.interests_title'|trans }}</h3>
                    <div>
                        {% for interest in user.interests %}
                            <a href="{{ path('shamra_academia_filter', {'tags': interest.context}) }}" class="interest-tag">{{ interest.context }}</a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {# Published Research #}
                {% if matchedResearches is defined and matchedResearches is not empty %}
                <div class="sidebar-card">
                    <h3><i class="fa fa-file-text"></i> {{ 'profile.published_research'|trans }}</h3>
                    {% for research in matchedResearches|slice(0, 3) %}
                        <div class="research-item">
                            <a href="{{ path('shamra_academia_research_show', { slug: research.slug }) }}">
                                {% if app.request.locale == "en" and research.englishTitle is not null and research.englishTitle != "" %}
                                    {{ research.englishTitle }}
                                {% else %}
                                    {{ research.arabicTitle }}
                                {% endif %}
                            </a>
                            <div class="research-meta">
                                <i class="fa fa-eye"></i> {{ research.hits }}
                            </div>
                        </div>
                    {% endfor %}
                    <a href="{{ path('shamra_academia_filter', {'createdBy': user.username}) }}" class="sidebar-view-all">
                        {{ 'profile.view_all_papers'|trans }} &rarr;
                    </a>
                </div>
                {% endif %}

            </div>
        </div>
    </div>
</div>

{# ===== Compose Post Modal ===== #}
{% if isOwner %}
<div class="compose-overlay" id="profileComposeOverlay">
    <div class="compose-modal">
        <div class="compose-modal-header">
            <h3>{{ 'social.create_post'|trans }}</h3>
            <button class="compose-modal-close" onclick="closeProfileComposer()">&times;</button>
        </div>
        <div class="compose-modal-body">
            <textarea class="compose-textarea" id="profileComposeContent" placeholder="{{ 'social.whats_on_your_mind'|trans }}" dir="auto"></textarea>
            <div class="compose-visibility" style="margin-top:12px;">
                <select id="profileComposeVisibility">
                    <option value="public">{{ 'social.visibility_public'|trans }}</option>
                    <option value="followers">{{ 'social.visibility_followers'|trans }}</option>
                    <option value="private">{{ 'social.visibility_private'|trans }}</option>
                </select>
            </div>
            <div class="image-preview" id="profileImagePreview">
                <img id="profileImagePreviewImg" src="" alt="">
                <button class="remove-image" onclick="removeProfileImage()">&times;</button>
            </div>
            <input type="file" id="profileImageInput" accept="image/*" style="display:none" onchange="previewProfileImage(this)">
        </div>
        <div class="compose-modal-footer">
            <button style="padding:8px 12px;border-radius:6px;border:1px solid var(--border-color);background:white;cursor:pointer;" onclick="document.getElementById('profileImageInput').click()">
                <i class="fa fa-image" style="color:var(--accent-color);"></i> {{ 'social.add_image'|trans }}
            </button>
            <div style="flex:1;"></div>
            <button class="btn-cancel-compose" onclick="closeProfileComposer()">{{ 'social.cancel'|trans }}</button>
            <button class="btn-publish" id="profilePublishBtn" onclick="publishProfilePost()" disabled>{{ 'social.publish'|trans }}</button>
        </div>
    </div>
</div>
{% endif %}

{# Edit Post Modal #}
{% if isOwner %}
<div class="edit-overlay" id="profileEditOverlay" data-slug="">
    <div class="edit-modal">
        <div class="edit-modal-header">
            <h4>{{ 'social.edit_post'|trans }}</h4>
            <button class="edit-modal-close" onclick="closeProfileEdit()">&times;</button>
        </div>
        <div class="edit-modal-body">
            <textarea id="profileEditContent" placeholder="{{ 'social.whats_on_your_mind'|trans }}" dir="auto"></textarea>
        </div>
        <div class="edit-modal-footer">
            <button class="edit-cancel-btn" onclick="closeProfileEdit()">{{ 'social.cancel'|trans }}</button>
            <button class="edit-save-btn" onclick="saveProfileEdit()">{{ 'social.save'|trans }}</button>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

{% block profileScripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
{% if app.request.locale == 'ar' %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/ar.min.js"></script>
<script>moment.locale('ar');</script>
{% endif %}
<script>
(function() {
    var profileUsername = '{{ user.username|e("js") }}';
    var currentUserId = {{ app.user ? app.user.id : 'null' }};
    var isOwner = {{ isOwner ? 'true' : 'false' }};
    var feedPage = 1;
    var isLoading = false;
    var hasMore = true;
    var currentTab = 'posts';

    // Translation strings
    var T = {
        following: '{{ "social.following"|trans|e("js") }}',
        follow: '{{ "social.follow"|trans|e("js") }}',
        paper_shared: '{{ "social.paper_shared"|trans|e("js") }}',
        pinned: '{{ "social.pinned"|trans|e("js") }}',
        research: '{{ "social.research"|trans|e("js") }}',
        shared_link: '{{ "social.shared_link"|trans|e("js") }}',
        edit_post: '{{ "social.edit_post"|trans|e("js") }}',
        delete_post: '{{ "social.delete_post"|trans|e("js") }}',
        link_copied: '{{ "social.link_copied"|trans|e("js") }}',
        publishing: '{{ "social.publishing"|trans|e("js") }}',
        publish: '{{ "social.publish"|trans|e("js") }}',
        error_occurred: '{{ "social.error_occurred"|trans|e("js") }}',
        confirm_delete: '{{ "social.confirm_delete"|trans|e("js") }}',
        photo_updated: '{{ "profile.photo_updated"|trans|e("js") }}',
        post_updated: '{{ "profile.post_updated"|trans|e("js") }}'
    };

    // ===== Avatar helpers =====
    function getAvatarUrl(image) {
        if (!image || image.indexOf('default_profile_pic') === 0) {
            return '/bundles/user/img/' + (image || 'default_profile_pic_m.png');
        }
        return '/uploads/profile/img/' + image;
    }
    function escapeHtml(text) {
        if (!text) return '';
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(text));
        return div.innerHTML;
    }
    function nl2br(str) {
        if (!str) return '';
        return escapeHtml(str).replace(/\n/g, '<br>');
    }

    // ===== Tab switching =====
    window.switchProfileTab = function(btn, tab) {
        document.querySelectorAll('.profile-feed-tab').forEach(function(b) { b.classList.remove('active'); });
        btn.classList.add('active');
        currentTab = tab;

        if (tab === 'posts') {
            document.getElementById('profile-posts-container').style.display = '';
            document.getElementById('profile-papers-container').style.display = 'none';
            var container = document.getElementById('profile-posts-container');
            if (feedPage === 1 && container.children.length === 0) {
                loadProfilePosts();
            }
            // Show loading/empty if applicable
            if (container.children.length === 0 && !isLoading && !hasMore) {
                document.getElementById('profile-feed-empty').style.display = 'block';
            }
        } else {
            document.getElementById('profile-posts-container').style.display = 'none';
            document.getElementById('profile-papers-container').style.display = '';
            document.getElementById('profile-feed-loading').style.display = 'none';
            document.getElementById('profile-feed-empty').style.display = 'none';
        }
    };

    // ===== Load posts from API =====
    function loadProfilePosts() {
        if (isLoading || !hasMore) return;
        isLoading = true;
        document.getElementById('profile-feed-loading').style.display = 'block';
        document.getElementById('profile-feed-empty').style.display = 'none';

        fetch('/api/profile-posts/' + profileUsername + '?page=' + feedPage, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            isLoading = false;
            document.getElementById('profile-feed-loading').style.display = 'none';

            if (data.posts && data.posts.length > 0) {
                var container = document.getElementById('profile-posts-container');
                data.posts.forEach(function(post) {
                    container.insertAdjacentHTML('beforeend', renderProfilePost(post));
                });
                feedPage++;
                hasMore = data.hasMore;
            } else if (feedPage === 1) {
                document.getElementById('profile-feed-empty').style.display = 'block';
            }
        })
        .catch(function(err) {
            isLoading = false;
            document.getElementById('profile-feed-loading').style.display = 'none';
            console.error('Profile feed error:', err);
        });
    }

    // ===== Render a single post card =====
    function renderProfilePost(post) {
        var authorImg = getAvatarUrl(post.author ? post.author.image : '');
        var authorName = post.author ? (post.author.firstName + ' ' + post.author.lastName) : '';
        var authorUrl = post.author ? ('/users/' + post.author.username) : '#';
        var timeAgo = post.createdAt ? moment(post.createdAt).fromNow() : '';
        var postUrl = '/post/' + post.slug;

        var badge = '';
        if (post.sharedResearch || post.sharedUrl) {
            badge = '<span class="post-card-badge paper-share"><i class="fa fa-file-text"></i> ' + T.paper_shared + '</span>';
        }
        var pinBadge = '';
        if (post.isPinned) {
            pinBadge = '<span class="post-card-badge pinned"><i class="fa fa-thumb-tack"></i> ' + T.pinned + '</span>';
        }

        var content = post.content || post.contentPreview || '';
        
        // Check if this is a research chat post - render HTML as-is
        var isResearchChatPost = content.indexOf('<div class="research-chat-post">') === 0;

        var sharedHtml = '';
        if (post.sharedResearch) {
            var res = post.sharedResearch;
            var resTitle = res.arabicTitle || res.englishTitle || '';
            var resLink = res.slug ? '/show/' + res.slug : '#';
            sharedHtml = '<a href="' + resLink + '" class="shared-research">' +
                '<div class="shared-research-icon"><i class="fa fa-file-text-o"></i></div>' +
                '<div class="shared-research-info"><h5>' + escapeHtml(resTitle) + '</h5>' +
                '<span><i class="fa fa-book"></i> ' + T.research + '</span></div></a>';
        } else if (post.sharedUrl) {
            sharedHtml = '<a href="' + escapeHtml(post.sharedUrl) + '" target="_blank" rel="noopener" class="shared-research">' +
                '<div class="shared-research-icon"><i class="fa fa-link"></i></div>' +
                '<div class="shared-research-info"><h5>' + escapeHtml(post.sharedUrl) + '</h5>' +
                '<span><i class="fa fa-link"></i> ' + T.shared_link + '</span></div></a>';
        }

        var imageHtml = '';
        if (post.image) {
            imageHtml = '<img src="/uploads/posts/' + post.image + '" class="post-image" alt="" loading="lazy">';
        }

        var canManage = isOwner || (currentUserId && post.author && currentUserId === post.author.id);
        var menuHtml = '';
        if (canManage) {
            menuHtml = '<div class="post-menu">' +
                '<button class="post-menu-btn" onclick="togglePostMenu(event, this)"><i class="fa fa-ellipsis-h"></i></button>' +
                '<div class="post-menu-dropdown">' +
                    '<button onclick="openProfileEditPost(\'' + post.slug + '\', this)"><i class="fa fa-pencil"></i> ' + T.edit_post + '</button>' +
                    '<button class="menu-delete" onclick="deleteProfilePost(\'' + post.slug + '\', this)"><i class="fa fa-trash"></i> ' + T.delete_post + '</button>' +
                '</div>' +
            '</div>';
        }

        var likeCount = post.likesCount || 0;
        var commentCount = post.commentsCount || 0;
        var likedClass = post.hasLiked ? ' liked' : '';
        var heartIcon = post.hasLiked ? 'fa-heart' : 'fa-heart-o';

        return '<div class="post-card" data-slug="' + post.slug + '">' +
            '<div class="post-card-header">' +
                '<img src="' + authorImg + '" class="post-author-avatar" alt="" loading="lazy">' +
                '<div class="post-author-info">' +
                    '<a href="' + authorUrl + '">' + escapeHtml(authorName) + '</a>' +
                    '<div class="post-time">' + timeAgo + '</div>' +
                '</div>' +
                pinBadge + badge + menuHtml +
            '</div>' +
            '<div class="post-card-body">' +
                '<div class="post-content">' + (isResearchChatPost ? content : nl2br(content)) + '</div>' +
                imageHtml +
                sharedHtml +
            '</div>' +
            '<div class="post-card-actions">' +
                '<button class="post-action-btn' + likedClass + '" onclick="toggleLikePost(\'' + post.slug + '\', this)">' +
                    '<i class="fa ' + heartIcon + '"></i> <span>' + likeCount + '</span></button>' +
                '<a href="' + postUrl + '" class="post-action-btn">' +
                    '<i class="fa fa-comment-o"></i> <span>' + commentCount + '</span></a>' +
                '<button class="post-action-btn" onclick="sharePostUrl(\'' + postUrl + '\')">' +
                    '<i class="fa fa-share"></i></button>' +
            '</div>' +
        '</div>';
    }

    // ===== Infinite scroll =====
    window.addEventListener('scroll', function() {
        if (currentTab === 'posts' && (window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
            loadProfilePosts();
        }
    });

    // ===== Initial load =====
    loadProfilePosts();

    // ===== Follow toggle =====
    window.toggleProfileFollow = function(btn) {
        var userId = btn.getAttribute('data-user-id');
        var isFollowing = btn.classList.contains('following-state');
        var url = isFollowing ? '/api/unfollow/' + userId : '/api/follow/' + userId;

        fetch(url, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.status === 'followed') {
                    btn.classList.remove('follow');
                    btn.classList.add('following-state');
                    btn.innerHTML = '<i class="fa fa-check"></i> ' + T.following;
                    var c = document.getElementById('followersCountDisplay');
                    if (c) c.textContent = data.followersCount;
                } else if (data.status === 'unfollowed') {
                    btn.classList.remove('following-state');
                    btn.classList.add('follow');
                    btn.innerHTML = '<i class="fa fa-plus"></i> ' + T.follow;
                    var c = document.getElementById('followersCountDisplay');
                    if (c) c.textContent = data.followersCount;
                }
            })
            .catch(function(err) { console.error('Follow error:', err); });
    };

    // ===== Like =====
    window.toggleLikePost = function(slug, btn) {
        if (!currentUserId) {
            window.location.href = '/login';
            return;
        }
        fetch('/api/profile-post/' + slug + '/like', {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            var countSpan = btn.querySelector('span');
            var icon = btn.querySelector('i');
            if (data.status === 'liked') {
                btn.classList.add('liked');
                icon.className = 'fa fa-heart';
            } else {
                btn.classList.remove('liked');
                icon.className = 'fa fa-heart-o';
            }
            if (countSpan) countSpan.textContent = data.likesCount;
        });
    };

    // ===== Share =====
    window.sharePostUrl = function(url) {
        var fullUrl = window.location.origin + url;
        if (navigator.share) {
            navigator.share({ url: fullUrl });
        } else if (navigator.clipboard) {
            navigator.clipboard.writeText(fullUrl).then(function() {
                showToast(T.link_copied);
            });
        }
    };

    window.shareProfileLink = function() {
        var url = window.location.href;
        if (navigator.share) {
            navigator.share({ url: url });
        } else if (navigator.clipboard) {
            navigator.clipboard.writeText(url).then(function() {
                showToast(T.link_copied);
            });
        }
    };

    function showToast(msg) {
        var toast = document.createElement('div');
        toast.textContent = msg;
        toast.style.cssText = 'position:fixed;top:80px;right:20px;background:#323232;color:white;padding:12px 24px;border-radius:8px;z-index:9999;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.2);';
        document.body.appendChild(toast);
        setTimeout(function() { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.3s'; setTimeout(function() { toast.remove(); }, 300); }, 2500);
    }

    // ===== Post menu =====
    window.togglePostMenu = function(event, btn) {
        event.stopPropagation();
        var dropdown = btn.nextElementSibling;
        var isOpen = dropdown.classList.contains('show');
        document.querySelectorAll('.post-menu-dropdown.show').forEach(function(d) { d.classList.remove('show'); });
        if (!isOpen) dropdown.classList.add('show');
    };
    document.addEventListener('click', function() {
        document.querySelectorAll('.post-menu-dropdown.show').forEach(function(d) { d.classList.remove('show'); });
    });

    // ===== Avatar upload =====
    window.uploadAvatar = function(input) {
        var file = input.files[0];
        if (!file) return;

        var formData = new FormData();
        formData.append('image', file);

        fetch('/api/user/profile/update-image', { method: 'POST', body: formData })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.success) {
                    document.getElementById('heroAvatar').src = data.imagePath + '?t=' + Date.now();
                    showToast(T.photo_updated);
                }
            })
            .catch(function() { showToast(T.error_occurred); });
    };

    {% if isOwner %}
    // ===== Composer =====
    window.openProfileComposer = function() {
        document.getElementById('profileComposeOverlay').classList.add('active');
        setTimeout(function() { document.getElementById('profileComposeContent').focus(); }, 100);
    };
    window.closeProfileComposer = function() {
        document.getElementById('profileComposeOverlay').classList.remove('active');
        document.getElementById('profileComposeContent').value = '';
        document.getElementById('profileImagePreview').style.display = 'none';
        document.getElementById('profileImageInput').value = '';
        document.getElementById('profilePublishBtn').disabled = true;
    };
    window.previewProfileImage = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('profileImagePreviewImg').src = e.target.result;
                document.getElementById('profileImagePreview').style.display = 'block';
                checkProfilePublish();
            };
            reader.readAsDataURL(input.files[0]);
        }
    };
    window.removeProfileImage = function() {
        document.getElementById('profileImageInput').value = '';
        document.getElementById('profileImagePreview').style.display = 'none';
        checkProfilePublish();
    };
    function checkProfilePublish() {
        var hasContent = document.getElementById('profileComposeContent').value.trim().length > 0;
        var hasImage = document.getElementById('profileImageInput').files.length > 0;
        document.getElementById('profilePublishBtn').disabled = !(hasContent || hasImage);
    }
    document.getElementById('profileComposeContent').addEventListener('input', checkProfilePublish);

    window.publishProfilePost = function() {
        var btn = document.getElementById('profilePublishBtn');
        btn.disabled = true;
        btn.textContent = T.publishing;

        var formData = new FormData();
        formData.append('content', document.getElementById('profileComposeContent').value);
        formData.append('visibility', document.getElementById('profileComposeVisibility').value);
        var imageFile = document.getElementById('profileImageInput').files[0];
        if (imageFile) formData.append('image', imageFile);

        fetch('/api/profile-post', { method: 'POST', body: formData })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.status === 'created') {
                    closeProfileComposer();
                    // Prepend the new post
                    var container = document.getElementById('profile-posts-container');
                    container.insertAdjacentHTML('afterbegin', renderProfilePost(data.post));
                    document.getElementById('profile-feed-empty').style.display = 'none';
                    // Switch to posts tab if on papers
                    if (currentTab !== 'posts') {
                        var postsBtn = document.querySelector('[data-tab="posts"]');
                        if (postsBtn) switchProfileTab(postsBtn, 'posts');
                    }
                } else {
                    showToast(T.error_occurred);
                }
                btn.disabled = false;
                btn.textContent = T.publish;
            })
            .catch(function() {
                showToast(T.error_occurred);
                btn.disabled = false;
                btn.textContent = T.publish;
            });
    };

    // ===== Edit post =====
    window.openProfileEditPost = function(slug, btn) {
        document.querySelectorAll('.post-menu-dropdown.show').forEach(function(d) { d.classList.remove('show'); });
        var card = document.querySelector('.post-card[data-slug="' + slug + '"]');
        var contentEl = card ? card.querySelector('.post-content') : null;
        var text = contentEl ? contentEl.innerText : '';
        document.getElementById('profileEditContent').value = text;
        document.getElementById('profileEditOverlay').setAttribute('data-slug', slug);
        document.getElementById('profileEditOverlay').classList.add('active');
    };
    window.closeProfileEdit = function() {
        document.getElementById('profileEditOverlay').classList.remove('active');
    };
    window.saveProfileEdit = function() {
        var slug = document.getElementById('profileEditOverlay').getAttribute('data-slug');
        var content = document.getElementById('profileEditContent').value.trim();
        if (!content) return;

        var formData = new FormData();
        formData.append('content', content);

        fetch('/api/profile-post/' + slug, { method: 'POST', body: formData })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.status === 'updated') {
                    var card = document.querySelector('.post-card[data-slug="' + slug + '"]');
                    var contentEl = card ? card.querySelector('.post-content') : null;
                    if (contentEl) contentEl.innerHTML = nl2br(content);
                    closeProfileEdit();
                    showToast(T.post_updated);
                }
            });
    };

    // ===== Delete post =====
    window.deleteProfilePost = function(slug, btn) {
        if (!confirm(T.confirm_delete)) return;
        document.querySelectorAll('.post-menu-dropdown.show').forEach(function(d) { d.classList.remove('show'); });

        fetch('/api/profile-post/' + slug + '/delete', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.status === 'deleted') {
                    var card = document.querySelector('.post-card[data-slug="' + slug + '"]');
                    if (card) {
                        card.style.opacity = '0';
                        card.style.transition = 'opacity 0.3s';
                        setTimeout(function() { card.remove(); }, 300);
                    }
                }
            });
    };
    {% endif %}
})();
</script>
{% endblock %}