\u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0627\u0644\u0641\u0646\u064a \/ \u0642\u0633\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f<\/title>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <style>\n :root {\n \/* \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0635\u0641\u062d\u0629: \u0631\u0635\u0627\u0635\u064a \u0641\u0636\u064a *\/\n --bg-silver: #e2e8f0;\n \n \/* \u0627\u0644\u0643\u0631\u0648\u062a \u0648\u0627\u0644\u0644\u0648\u062d\u0627\u062a: \u0646\u064a\u0644\u064a \u0637\u0648\u062e *\/\n --navy-card: #0b132b;\n --navy-gradient: linear-gradient(135deg, #070d19 0%, #0b132b 50%, #1c2541 100%);\n \n \/* \u0627\u0644\u0644\u0645\u0633\u0627\u062a \u0627\u0644\u0630\u0647\u0628\u064a\u0629 \u0648\u0627\u0644\u0646\u0635\u0648\u0635 *\/\n --gold-primary: #d4af37;\n --gold-gradient: linear-gradient(135deg, #f3e5ab 0%, #d4af37 50%, #aa7c11 100%);\n --text-gold: #f3e5ab;\n --text-light: #ffffff;\n --text-muted: #94a3b8;\n --border-gold: rgba(212, 175, 55, 0.4);\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Tajawal', sans-serif;\n }\n\n body {\n background-color: var(--bg-silver);\n color: var(--text-light);\n min-height: 100vh;\n padding-bottom: 60px;\n }\n\n \/* \u0627\u0644\u0647\u064a\u062f\u0631 \u0627\u0644\u0646\u064a\u0644\u064a \u0627\u0644\u0637\u0648\u062e *\/\n header {\n background: var(--navy-gradient);\n border-bottom: 3px solid var(--gold-primary);\n padding: 40px 20px 60px;\n text-align: center;\n position: relative;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);\n }\n\n header::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 50%;\n transform: translateX(-50%);\n width: 200px;\n height: 5px;\n background: var(--gold-gradient);\n box-shadow: 0 0 15px var(--gold-primary);\n border-radius: 3px;\n }\n\n .header-title {\n font-size: 2.1rem;\n font-weight: 900;\n background: var(--gold-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n }\n\n .header-subtitle {\n color: var(--text-muted);\n font-size: 1.1rem;\n font-weight: 600;\n }\n\n .container {\n max-width: 1280px;\n margin: -30px auto 0;\n padding: 0 20px;\n position: relative;\n z-index: 10;\n }\n\n \/* \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0648\u0627\u0644\u0628\u062d\u062b \u0627\u0644\u0646\u064a\u0644\u064a\u0629 *\/\n .controls-card {\n background: var(--navy-card);\n border: 1px solid var(--border-gold);\n border-radius: 18px;\n padding: 20px;\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);\n margin-bottom: 30px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n\n .search-box {\n position: relative;\n width: 100%;\n }\n\n .search-box input {\n width: 100%;\n padding: 14px 45px 14px 18px;\n background: rgba(28, 37, 65, 0.9);\n border: 1px solid var(--border-gold);\n border-radius: 10px;\n font-size: 1rem;\n color: var(--text-light);\n outline: none;\n }\n\n .search-box input:focus {\n border-color: var(--gold-primary);\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\n }\n\n .search-box i {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--gold-primary);\n font-size: 1.2rem;\n }\n\n .filter-tabs {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n }\n\n .tab-btn {\n padding: 10px 18px;\n border: 1px solid var(--border-gold);\n background: rgba(28, 37, 65, 0.7);\n color: var(--text-light);\n border-radius: 8px;\n font-weight: 700;\n font-size: 0.9rem;\n cursor: pointer;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .tab-btn:hover, .tab-btn.active {\n background: var(--gold-gradient);\n color: #000;\n border-color: var(--gold-primary);\n }\n\n .tab-badge {\n background: rgba(0, 0, 0, 0.3);\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 0.8rem;\n }\n\n \/* \u0634\u0628\u0643\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u0646\u064a\u0644\u064a\u0629 \u0627\u0644\u0637\u0648\u062e *\/\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n gap: 22px;\n }\n\n .card {\n background: var(--navy-card);\n border: 1px solid var(--border-gold);\n border-radius: 16px;\n padding: 22px;\n position: relative;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: transform 0.3s, border-color 0.3s;\n }\n\n .card:hover {\n transform: translateY(-6px);\n border-color: var(--gold-primary);\n }\n\n .card-number {\n position: absolute;\n top: 15px;\n left: 15px;\n background: rgba(212, 175, 55, 0.15);\n border: 1px solid var(--border-gold);\n color: var(--gold-primary);\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.85rem;\n font-weight: 800;\n }\n\n .card-header {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 16px;\n padding-left: 25px;\n }\n\n .avatar {\n width: 54px;\n height: 54px;\n border-radius: 50%;\n background: var(--navy-gradient);\n border: 2px solid var(--gold-primary);\n color: var(--gold-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.3rem;\n font-weight: 800;\n flex-shrink: 0;\n }\n\n .user-info h3 {\n font-size: 1.15rem;\n color: var(--text-light);\n margin-bottom: 5px;\n font-weight: 800;\n }\n\n .status-badge {\n display: inline-block;\n padding: 3px 10px;\n border-radius: 15px;\n font-size: 0.78rem;\n font-weight: 700;\n background: rgba(212, 175, 55, 0.2);\n color: var(--gold-primary);\n border: 1px solid var(--border-gold);\n }\n\n .card-details {\n display: flex;\n flex-direction: column;\n gap: 12px;\n font-size: 0.95rem;\n margin-bottom: 18px;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n padding-top: 14px;\n }\n\n .detail-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: rgba(28, 37, 65, 0.5);\n padding: 8px 12px;\n border-radius: 8px;\n border-right: 3px solid var(--gold-primary);\n }\n\n .detail-label {\n color: var(--text-muted);\n font-size: 0.85rem;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .detail-label i {\n color: var(--gold-primary);\n }\n\n .detail-value {\n color: var(--text-light);\n font-weight: 700;\n }\n\n .email-section {\n background: rgba(28, 37, 65, 0.8);\n border: 1px solid var(--border-gold);\n padding: 10px 12px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n }\n\n .email-text {\n font-size: 0.85rem;\n color: var(--text-gold);\n font-weight: 600;\n direction: ltr;\n word-break: break-all;\n }\n\n .copy-btn {\n background: var(--gold-gradient);\n border: none;\n color: #000;\n width: 34px;\n height: 34px;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.95rem;\n flex-shrink: 0;\n }\n\n .no-email {\n color: #64748b;\n font-style: italic;\n font-size: 0.85rem;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .toast {\n position: fixed;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%) translateY(120px);\n background: var(--gold-gradient);\n color: #000;\n padding: 12px 24px;\n border-radius: 25px;\n font-weight: 800;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n transition: transform 0.3s ease;\n z-index: 1000;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .toast.show {\n transform: translateX(-50%) translateY(0);\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header>\n <div class=\"header-title\">\n <i class=\"fa-solid fa-wheelchair-move\"><\/i>\n <span>\u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0627\u0644\u0641\u0646\u064a \/ \u0642\u0633\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f<\/span>\n <\/div>\n <div class=\"header-subtitle\">\u0644\u0644\u062f\u0631\u0627\u0633\u062a\u064a\u0646 \u0627\u0644\u0635\u0628\u0627\u062d\u064a\u0629 \u0648\u0627\u0644\u0645\u0633\u0627\u0626\u064a\u0629 \u0644\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a \u0662\u0660\u0662\u0666-\u0662\u0660\u0662\u0667<\/div>\n <\/header>\n\n <div class=\"container\">\n \n <div class=\"controls-card\">\n <div class=\"search-box\">\n <i class=\"fa-solid fa-magnifying-glass\"><\/i>\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u0627\u0628\u062d\u062b \u0628\u0627\u0633\u0645 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a\u060c \u0627\u0644\u0644\u0642\u0628\u060c \u0627\u0644\u0634\u0647\u0627\u062f\u0629\u060c \u0627\u0644\u0635\u0641\u0629\u060c \u0623\u0648 \u0627\u0644\u0625\u064a\u0645\u064a\u0644...\">\n <\/div>\n \n <div class=\"filter-tabs\">\n <button class=\"tab-btn active\" onclick=\"filterCategory('\u0627\u0644\u0643\u0644', event)\">\n <i class=\"fa-solid fa-users\"><\/i>\n <span>\u0627\u0644\u0643\u0644<\/span>\n <span class=\"tab-badge\" id=\"count-all\">0<\/span>\n <\/button>\n <button class=\"tab-btn\" onclick=\"filterCategory('\u0645\u0644\u0627\u0643', event)\">\n <i class=\"fa-solid fa-user-check\"><\/i>\n <span>\u0645\u0644\u0627\u0643<\/span>\n <span class=\"tab-badge\" id=\"count-staff\">0<\/span>\n <\/button>\n <button class=\"tab-btn\" onclick=\"filterCategory('\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a', event)\">\n <i class=\"fa-solid fa-user-clock\"><\/i>\n <span>\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a<\/span>\n <span class=\"tab-badge\" id=\"count-lecturers\">0<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"cards-grid\" id=\"cardsGrid\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"toast\" class=\"toast\">\n <i class=\"fa-solid fa-circle-check\"><\/i>\n <span>\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0628\u0646\u062c\u0627\u062d!<\/span>\n <\/div>\n\n <script>\n \/\/ \u0643\u0627\u0641\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062d\u0631\u0641\u064a\u0629 \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629 \u0643\u0644\u064a\u0627\u064b \u0644\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u0631\u0641\u0642 (21 \u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0641\u0646\u064a)\n const staffData = [\n { id: 1, name: \"\u0627\u062d\u0645\u062f \u063a\u0646\u064a \u062d\u0633\u064a\u0646 \u0647\u0627\u0634\u0645\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0623\u0633\u062a\u0627\u0630 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"\" },\n { id: 2, name: \"\u0639\u0644\u064a \u0631\u0627\u0636\u064a \u0639\u0628\u062f \u0627\u0644\u062d\u0633\u064a\u0646\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0623\u0633\u062a\u0627\u0630 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"allitufaly1@gmail.com\" },\n { id: 3, name: \"\u0645\u062d\u0645\u062f \u0639\u0628\u062f \u0627\u0644\u0631\u0636\u0627 \u0639\u0628\u0627\u0633\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"mohd.a.abbas@atu.edu.iq\" },\n { id: 4, name: \"\u0641\u0627\u0637\u0645\u0647 \u06a9\u0627\u0638\u0645 \u0631\u0641\u064a\u0641\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"fatima.rafeef.iku@atu.edu.iq\" },\n { id: 5, name: \"\u062d\u0627\u0632\u0645 \u0641\u0627\u0631\u0633 \u0646\u0639\u0645\u0647\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"hazim.faris.iku@atu.edu.iq\" },\n { id: 6, name: \"\u0648\u0633\u0646 \u0645\u062d\u0633\u0646 \u0639\u0644\u064a\u0648\u064a \u062c\u0648\u0627\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"wasan.muhsin.iku@atu.edu.iq\" },\n { id: 7, name: \"\u0639\u0628\u0627\u0633 \u062d\u0645\u064a\u062f \u0643\u0627\u0638\u0645 \u0639\u0644\u064a\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"engr.abbas1988@gmail.com\" },\n { id: 8, name: \"\u0645\u0646\u064a\u0631 \u0646\u0627\u062c\u064a \u0648\u062d\u064a\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"muneer.wheed@atu.edu.iq\" },\n { id: 9, name: \"\u062d\u0648\u0631\u0627\u0621 \u0641\u0627\u0636\u0644 \u0639\u0628\u0627\u0633 \u0645\u062c\u064a\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"hawraa.abbass.iku@atu.edu.iq\" },\n { id: 10, name: \"\u0647\u0648\u064a\u062f\u0627 \u0639\u0628\u0627\u0633 \u0633\u0631\u062d\u0627\u0646 \u0639\u0628\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"howaida.abd@atu.edu.iq\" },\n { id: 11, name: \"\u0632\u064a\u0646\u0628 \u0639\u0628\u0648\u062f \u0645\u0631\u0632\u0648\u0642 \u062c\u0627\u0633\u0645\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"zainab@atu.edu.iq\" },\n { id: 12, name: \"\u0632\u064a\u062f \u0639\u0627\u0645\u0631 \u0639\u0628\u0627\u0633 \u062d\u0633\u06cc\u0646\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"zaid.jeryo@atu.edu.iq\" },\n { id: 13, name: \"\u062d\u064a\u062f\u0631 \u0639\u0628\u062f \u0627\u0644\u0627\u0644\u0647 \u062f\u0627\u0648\u062f \u0633\u0644\u0645\u0627\u0646\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0645\u0642\u064a\u0645 \u0627\u0642\u062f\u0645 \u062c\u0631\u0627\u062d\u0629 \u0643\u0633\u0648\u0631\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633 \u0637\u0628\", email: \"haydershaaban0@gmail.com\" },\n { id: 14, name: \"\u0645\u062d\u0645\u0648\u062f \u0639\u0645\u0627\u062f \u0631\u0633\u0648\u0644 \u0639\u0628\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0637\u0628\u064a\u0628 \u0645\u0645\u0627\u0631\u0633\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633 \u0637\u0628 \u0628\u064a\u0637\u0631\", email: \"mahmourasool@atu.edu.iq\" },\n { id: 15, name: \"\u0644\u064a\u062b \u0639\u0628\u062f \u0627\u0644\u0643\u0631\u064a\u0645 \u0639\u0628\u062f \u0627\u0644\u0631\u0633\u0648\u0644\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u062a\u0642\u0646\u064a\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"lythalfkhrany@gmail.com\" },\n { id: 16, name: \"\u062f\u0639\u0627\u0621 \u0641\u0627\u0636\u0644 \u0643\u0627\u0638\u0645 \u062d\u0633\u0646\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u0647\u0646\u062f\u0633\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"doaa.kadhim@atu.edu.iq\" },\n { id: 17, name: \"\u0635\u0627\u062f\u0642 \u063a\u0627\u0644\u0628 \u0639\u0632\u06cc\u0632 \u062d\u0633\u064a\u0646\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u062a\u0642\u0646\u064a\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"saadq.hussein@atu.edu.iq\" },\n { id: 18, name: \"\u0645\u062d\u0645\u062f \u06a9\u0627\u0638\u0645 \u0637\u0627\u0647\u0631 \u062c\u0648\u0627\u062f\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0645\u0647\u0646\u062f\u0633 \u0627\u0637\u0631\u0627\u0641\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"mohamedktjm@gmail.com\" },\n { id: 19, name: \"\u0631\u0633\u0644 \u0643\u0631\u064a\u0645 \u0647\u0627\u062f\u064a \u0647\u0627\u0634\u0645\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0645\u0647\u0646\u062f\u0633 \u0627\u0637\u0631\u0627\u0641\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"gawzaa667788@gmail.com\" },\n { id: 20, name: \"\u0645\u064a\u0627\u062f\u0629 \u0643\u0627\u0638\u0645 \u0646\u0648\u0631 \u0645\u062d\u0633\u0646\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f\", degree: \"\u062f\u0628\u0644\u0648\u0645 \u062a\u0642\u0646\u064a\", email: \"meiadaalatheri@gmail.com\" },\n { id: 21, name: \"\u0639\u0644\u064a \u062c\u0648\u0627\u062f \u0647\u0627\u062f\u064a \u0639\u0628\u062f\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f\", degree: \"\u062f\u0628\u0644\u0648\u0645 \u062a\u0642\u0646\u064a\", email: \"h2929hh@gmail.com\" }\n ];\n\n let currentStatus = \"\u0627\u0644\u0643\u0644\";\n\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0639\u062f\u0627\u062f\u0627\u062a\n function updateCounts() {\n document.getElementById('count-all').innerText = staffData.length;\n document.getElementById('count-staff').innerText = staffData.filter(s => s.status === '\u0645\u0644\u0627\u0643').length;\n document.getElementById('count-lecturers').innerText = staffData.filter(s => s.status === '\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a').length;\n }\n\n \/\/ \u0628\u0646\u0627\u0621 \u0648\u0639\u0631\u0636 \u0627\u0644\u0643\u0631\u0648\u062a\n function renderCards(data) {\n const grid = document.getElementById('cardsGrid');\n grid.innerHTML = '';\n\n if (data.length === 0) {\n grid.innerHTML = `<div style=\"grid-column: 1\/-1; text-align:center; padding:40px; color:var(--text-muted);\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c \u0645\u0637\u0627\u0628\u0642\u0629 \u0644\u0628\u062d\u062b\u0643.<\/div>`;\n return;\n }\n\n data.forEach(item => {\n const card = document.createElement('div');\n card.className = 'card';\n const initial = item.name.trim().charAt(0) || '\u0623';\n\n card.innerHTML = `\n <div class=\"card-number\">#${item.id}<\/div>\n <div>\n <div class=\"card-header\">\n <div class=\"avatar\">${initial}<\/div>\n <div class=\"user-info\">\n <h3>${item.name}<\/h3>\n <span class=\"status-badge\"><i class=\"fa-solid fa-id-badge\"><\/i> ${item.status}<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card-details\">\n <div class=\"detail-row\">\n <span class=\"detail-label\"><i class=\"fa-solid fa-award\"><\/i> \u0627\u0644\u0644\u0642\u0628 \u0627\u0644\u0639\u0644\u0645\u0649 \/ \u0627\u0644\u0648\u0638\u064a\u0641\u064a<\/span>\n <span class=\"detail-value\">${item.title}<\/span>\n <\/div>\n <div class=\"detail-row\">\n <span class=\"detail-label\"><i class=\"fa-solid fa-graduation-cap\"><\/i> \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0627\u0644\u062d\u0627\u0635\u0644 \u0639\u0644\u064a\u0647\u0627<\/span>\n <span class=\"detail-value\">${item.degree}<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"email-section\">\n ${item.email ? `\n <span class=\"email-text\">${item.email}<\/span>\n <button class=\"copy-btn\" onclick=\"copyEmail('${item.email}')\" title=\"\u0646\u0633\u062e \u0627\u0644\u0625\u064a\u0645\u064a\u0644\">\n <i class=\"fa-regular fa-copy\"><\/i>\n <\/button>\n ` : `\n <span class=\"no-email\"><i class=\"fa-solid fa-circle-info\"><\/i> \u0627\u0644\u0628\u0631\u064a\u062f \u063a\u064a\u0631 \u0645\u062f\u0631\u062c<\/span>\n `}\n <\/div>\n `;\n grid.appendChild(card);\n });\n }\n\n \/\/ \u0627\u0644\u0641\u0644\u062a\u0631\u0629\n function filterCategory(status, event) {\n currentStatus = status;\n document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));\n event.currentTarget.classList.add('active');\n filterData();\n }\n\n function filterData() {\n const query = document.getElementById('searchInput').value.toLowerCase().trim();\n const filtered = staffData.filter(item => {\n const matchesStatus = (currentStatus === \"\u0627\u0644\u0643\u0644\" || item.status === currentStatus);\n const matchesSearch = item.name.toLowerCase().includes(query) ||\n item.title.toLowerCase().includes(query) ||\n item.degree.toLowerCase().includes(query) ||\n item.status.toLowerCase().includes(query) ||\n item.email.toLowerCase().includes(query);\n return matchesStatus && matchesSearch;\n });\n renderCards(filtered);\n }\n\n function copyEmail(email) {\n navigator.clipboard.writeText(email).then(() => {\n const toast = document.getElementById('toast');\n toast.classList.add('show');\n setTimeout(() => toast.classList.remove('show'), 2500);\n });\n }\n\n document.getElementById('searchInput').addEventListener('input', filterData);\n updateCounts();\n renderCards(staffData);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0627\u0644\u0641\u0646\u064a \/ \u0642\u0633\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f \u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0627\u0644\u0641\u0646\u064a \/ \u0642\u0633\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f \u0644\u0644\u062f\u0631\u0627\u0633\u062a\u064a\u0646 \u0627\u0644\u0635\u0628\u0627\u062d\u064a\u0629 \u0648\u0627\u0644\u0645\u0633\u0627\u0626\u064a\u0629 \u0644\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a \u0662\u0660\u0662\u0666-\u0662\u0660\u0662\u0667 \u0627\u0644\u0643\u0644 0 \u0645\u0644\u0627\u0643 0 \u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a 0 \u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0628\u0646\u062c\u0627\u062d!<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-43632","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/43632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=43632"}],"version-history":[{"count":4,"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/43632\/revisions"}],"predecessor-version":[{"id":43636,"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/43632\/revisions\/43636"}],"wp:attachment":[{"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=43632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":43632,"date":"2026-10-15T19:58:54","date_gmt":"2026-10-15T19:58:54","guid":{"rendered":"https:\/\/iku.atu.edu.iq\/?page_id=43632"},"modified":"2026-10-15T20:17:08","modified_gmt":"2026-10-15T20:17:08","slug":"%d9%83%d8%a7%d8%af%d8%b1-%d9%82%d8%b3%d9%85-%d8%aa%d9%82%d9%86%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d8%a7%d8%b7%d8%b1%d8%a7%d9%81-%d9%88%d8%a7%d9%84%d9%85%d8%b3%d8%a7%d9%86%d8%af-%d8%a7%d9%84%d8%b5%d9%86","status":"publish","type":"page","link":"https:\/\/iku.atu.edu.iq\/?page_id=43632","title":{"rendered":"\u0643\u0627\u062f\u0631 \u0642\u0633\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0627\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f \u0627\u0644\u0635\u0646\u0627\u0639\u064a\u0629"},"content":{"rendered":"\n\n\n\n \n \n \u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0627\u0644\u0641\u0646\u064a \/ \u0642\u0633\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f<\/title>\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800;900&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <style>\n :root {\n \/* \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0635\u0641\u062d\u0629: \u0631\u0635\u0627\u0635\u064a \u0641\u0636\u064a *\/\n --bg-silver: #e2e8f0;\n \n \/* \u0627\u0644\u0643\u0631\u0648\u062a \u0648\u0627\u0644\u0644\u0648\u062d\u0627\u062a: \u0646\u064a\u0644\u064a \u0637\u0648\u062e *\/\n --navy-card: #0b132b;\n --navy-gradient: linear-gradient(135deg, #070d19 0%, #0b132b 50%, #1c2541 100%);\n \n \/* \u0627\u0644\u0644\u0645\u0633\u0627\u062a \u0627\u0644\u0630\u0647\u0628\u064a\u0629 \u0648\u0627\u0644\u0646\u0635\u0648\u0635 *\/\n --gold-primary: #d4af37;\n --gold-gradient: linear-gradient(135deg, #f3e5ab 0%, #d4af37 50%, #aa7c11 100%);\n --text-gold: #f3e5ab;\n --text-light: #ffffff;\n --text-muted: #94a3b8;\n --border-gold: rgba(212, 175, 55, 0.4);\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n font-family: 'Tajawal', sans-serif;\n }\n\n body {\n background-color: var(--bg-silver);\n color: var(--text-light);\n min-height: 100vh;\n padding-bottom: 60px;\n }\n\n \/* \u0627\u0644\u0647\u064a\u062f\u0631 \u0627\u0644\u0646\u064a\u0644\u064a \u0627\u0644\u0637\u0648\u062e *\/\n header {\n background: var(--navy-gradient);\n border-bottom: 3px solid var(--gold-primary);\n padding: 40px 20px 60px;\n text-align: center;\n position: relative;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);\n }\n\n header::after {\n content: '';\n position: absolute;\n bottom: -3px;\n left: 50%;\n transform: translateX(-50%);\n width: 200px;\n height: 5px;\n background: var(--gold-gradient);\n box-shadow: 0 0 15px var(--gold-primary);\n border-radius: 3px;\n }\n\n .header-title {\n font-size: 2.1rem;\n font-weight: 900;\n background: var(--gold-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n }\n\n .header-subtitle {\n color: var(--text-muted);\n font-size: 1.1rem;\n font-weight: 600;\n }\n\n .container {\n max-width: 1280px;\n margin: -30px auto 0;\n padding: 0 20px;\n position: relative;\n z-index: 10;\n }\n\n \/* \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0648\u0627\u0644\u0628\u062d\u062b \u0627\u0644\u0646\u064a\u0644\u064a\u0629 *\/\n .controls-card {\n background: var(--navy-card);\n border: 1px solid var(--border-gold);\n border-radius: 18px;\n padding: 20px;\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);\n margin-bottom: 30px;\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n\n .search-box {\n position: relative;\n width: 100%;\n }\n\n .search-box input {\n width: 100%;\n padding: 14px 45px 14px 18px;\n background: rgba(28, 37, 65, 0.9);\n border: 1px solid var(--border-gold);\n border-radius: 10px;\n font-size: 1rem;\n color: var(--text-light);\n outline: none;\n }\n\n .search-box input:focus {\n border-color: var(--gold-primary);\n box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);\n }\n\n .search-box i {\n position: absolute;\n right: 15px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--gold-primary);\n font-size: 1.2rem;\n }\n\n .filter-tabs {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n }\n\n .tab-btn {\n padding: 10px 18px;\n border: 1px solid var(--border-gold);\n background: rgba(28, 37, 65, 0.7);\n color: var(--text-light);\n border-radius: 8px;\n font-weight: 700;\n font-size: 0.9rem;\n cursor: pointer;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .tab-btn:hover, .tab-btn.active {\n background: var(--gold-gradient);\n color: #000;\n border-color: var(--gold-primary);\n }\n\n .tab-badge {\n background: rgba(0, 0, 0, 0.3);\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 0.8rem;\n }\n\n \/* \u0634\u0628\u0643\u0629 \u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a \u0627\u0644\u0646\u064a\u0644\u064a\u0629 \u0627\u0644\u0637\u0648\u062e *\/\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n gap: 22px;\n }\n\n .card {\n background: var(--navy-card);\n border: 1px solid var(--border-gold);\n border-radius: 16px;\n padding: 22px;\n position: relative;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n transition: transform 0.3s, border-color 0.3s;\n }\n\n .card:hover {\n transform: translateY(-6px);\n border-color: var(--gold-primary);\n }\n\n .card-number {\n position: absolute;\n top: 15px;\n left: 15px;\n background: rgba(212, 175, 55, 0.15);\n border: 1px solid var(--border-gold);\n color: var(--gold-primary);\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.85rem;\n font-weight: 800;\n }\n\n .card-header {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 16px;\n padding-left: 25px;\n }\n\n .avatar {\n width: 54px;\n height: 54px;\n border-radius: 50%;\n background: var(--navy-gradient);\n border: 2px solid var(--gold-primary);\n color: var(--gold-primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.3rem;\n font-weight: 800;\n flex-shrink: 0;\n }\n\n .user-info h3 {\n font-size: 1.15rem;\n color: var(--text-light);\n margin-bottom: 5px;\n font-weight: 800;\n }\n\n .status-badge {\n display: inline-block;\n padding: 3px 10px;\n border-radius: 15px;\n font-size: 0.78rem;\n font-weight: 700;\n background: rgba(212, 175, 55, 0.2);\n color: var(--gold-primary);\n border: 1px solid var(--border-gold);\n }\n\n .card-details {\n display: flex;\n flex-direction: column;\n gap: 12px;\n font-size: 0.95rem;\n margin-bottom: 18px;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n padding-top: 14px;\n }\n\n .detail-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: rgba(28, 37, 65, 0.5);\n padding: 8px 12px;\n border-radius: 8px;\n border-right: 3px solid var(--gold-primary);\n }\n\n .detail-label {\n color: var(--text-muted);\n font-size: 0.85rem;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .detail-label i {\n color: var(--gold-primary);\n }\n\n .detail-value {\n color: var(--text-light);\n font-weight: 700;\n }\n\n .email-section {\n background: rgba(28, 37, 65, 0.8);\n border: 1px solid var(--border-gold);\n padding: 10px 12px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n }\n\n .email-text {\n font-size: 0.85rem;\n color: var(--text-gold);\n font-weight: 600;\n direction: ltr;\n word-break: break-all;\n }\n\n .copy-btn {\n background: var(--gold-gradient);\n border: none;\n color: #000;\n width: 34px;\n height: 34px;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.95rem;\n flex-shrink: 0;\n }\n\n .no-email {\n color: #64748b;\n font-style: italic;\n font-size: 0.85rem;\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .toast {\n position: fixed;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%) translateY(120px);\n background: var(--gold-gradient);\n color: #000;\n padding: 12px 24px;\n border-radius: 25px;\n font-weight: 800;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n transition: transform 0.3s ease;\n z-index: 1000;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .toast.show {\n transform: translateX(-50%) translateY(0);\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header>\n <div class=\"header-title\">\n <i class=\"fa-solid fa-wheelchair-move\"><\/i>\n <span>\u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0627\u0644\u0641\u0646\u064a \/ \u0642\u0633\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f<\/span>\n <\/div>\n <div class=\"header-subtitle\">\u0644\u0644\u062f\u0631\u0627\u0633\u062a\u064a\u0646 \u0627\u0644\u0635\u0628\u0627\u062d\u064a\u0629 \u0648\u0627\u0644\u0645\u0633\u0627\u0626\u064a\u0629 \u0644\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a \u0662\u0660\u0662\u0666-\u0662\u0660\u0662\u0667<\/div>\n <\/header>\n\n <div class=\"container\">\n \n <div class=\"controls-card\">\n <div class=\"search-box\">\n <i class=\"fa-solid fa-magnifying-glass\"><\/i>\n <input type=\"text\" id=\"searchInput\" placeholder=\"\u0627\u0628\u062d\u062b \u0628\u0627\u0633\u0645 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a\u060c \u0627\u0644\u0644\u0642\u0628\u060c \u0627\u0644\u0634\u0647\u0627\u062f\u0629\u060c \u0627\u0644\u0635\u0641\u0629\u060c \u0623\u0648 \u0627\u0644\u0625\u064a\u0645\u064a\u0644...\">\n <\/div>\n \n <div class=\"filter-tabs\">\n <button class=\"tab-btn active\" onclick=\"filterCategory('\u0627\u0644\u0643\u0644', event)\">\n <i class=\"fa-solid fa-users\"><\/i>\n <span>\u0627\u0644\u0643\u0644<\/span>\n <span class=\"tab-badge\" id=\"count-all\">0<\/span>\n <\/button>\n <button class=\"tab-btn\" onclick=\"filterCategory('\u0645\u0644\u0627\u0643', event)\">\n <i class=\"fa-solid fa-user-check\"><\/i>\n <span>\u0645\u0644\u0627\u0643<\/span>\n <span class=\"tab-badge\" id=\"count-staff\">0<\/span>\n <\/button>\n <button class=\"tab-btn\" onclick=\"filterCategory('\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a', event)\">\n <i class=\"fa-solid fa-user-clock\"><\/i>\n <span>\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a<\/span>\n <span class=\"tab-badge\" id=\"count-lecturers\">0<\/span>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"cards-grid\" id=\"cardsGrid\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"toast\" class=\"toast\">\n <i class=\"fa-solid fa-circle-check\"><\/i>\n <span>\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0628\u0646\u062c\u0627\u062d!<\/span>\n <\/div>\n\n <script>\n \/\/ \u0643\u0627\u0641\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u062d\u0631\u0641\u064a\u0629 \u0627\u0644\u0645\u0637\u0627\u0628\u0642\u0629 \u0643\u0644\u064a\u0627\u064b \u0644\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u0631\u0641\u0642 (21 \u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0641\u0646\u064a)\n const staffData = [\n { id: 1, name: \"\u0627\u062d\u0645\u062f \u063a\u0646\u064a \u062d\u0633\u064a\u0646 \u0647\u0627\u0634\u0645\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0623\u0633\u062a\u0627\u0630 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"\" },\n { id: 2, name: \"\u0639\u0644\u064a \u0631\u0627\u0636\u064a \u0639\u0628\u062f \u0627\u0644\u062d\u0633\u064a\u0646\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0623\u0633\u062a\u0627\u0630 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"allitufaly1@gmail.com\" },\n { id: 3, name: \"\u0645\u062d\u0645\u062f \u0639\u0628\u062f \u0627\u0644\u0631\u0636\u0627 \u0639\u0628\u0627\u0633\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"mohd.a.abbas@atu.edu.iq\" },\n { id: 4, name: \"\u0641\u0627\u0637\u0645\u0647 \u06a9\u0627\u0638\u0645 \u0631\u0641\u064a\u0641\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"fatima.rafeef.iku@atu.edu.iq\" },\n { id: 5, name: \"\u062d\u0627\u0632\u0645 \u0641\u0627\u0631\u0633 \u0646\u0639\u0645\u0647\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"hazim.faris.iku@atu.edu.iq\" },\n { id: 6, name: \"\u0648\u0633\u0646 \u0645\u062d\u0633\u0646 \u0639\u0644\u064a\u0648\u064a \u062c\u0648\u0627\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"wasan.muhsin.iku@atu.edu.iq\" },\n { id: 7, name: \"\u0639\u0628\u0627\u0633 \u062d\u0645\u064a\u062f \u0643\u0627\u0638\u0645 \u0639\u0644\u064a\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u062f\u0643\u062a\u0648\u0631\u0627\u0629\", email: \"engr.abbas1988@gmail.com\" },\n { id: 8, name: \"\u0645\u0646\u064a\u0631 \u0646\u0627\u062c\u064a \u0648\u062d\u064a\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"muneer.wheed@atu.edu.iq\" },\n { id: 9, name: \"\u062d\u0648\u0631\u0627\u0621 \u0641\u0627\u0636\u0644 \u0639\u0628\u0627\u0633 \u0645\u062c\u064a\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"hawraa.abbass.iku@atu.edu.iq\" },\n { id: 10, name: \"\u0647\u0648\u064a\u062f\u0627 \u0639\u0628\u0627\u0633 \u0633\u0631\u062d\u0627\u0646 \u0639\u0628\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"howaida.abd@atu.edu.iq\" },\n { id: 11, name: \"\u0632\u064a\u0646\u0628 \u0639\u0628\u0648\u062f \u0645\u0631\u0632\u0648\u0642 \u062c\u0627\u0633\u0645\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"zainab@atu.edu.iq\" },\n { id: 12, name: \"\u0632\u064a\u062f \u0639\u0627\u0645\u0631 \u0639\u0628\u0627\u0633 \u062d\u0633\u06cc\u0646\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u062f\u0631\u0633 \u0645\u0633\u0627\u0639\u062f\", degree: \"\u0645\u0627\u062c\u0633\u062a\u064a\u0631\", email: \"zaid.jeryo@atu.edu.iq\" },\n { id: 13, name: \"\u062d\u064a\u062f\u0631 \u0639\u0628\u062f \u0627\u0644\u0627\u0644\u0647 \u062f\u0627\u0648\u062f \u0633\u0644\u0645\u0627\u0646\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0645\u0642\u064a\u0645 \u0627\u0642\u062f\u0645 \u062c\u0631\u0627\u062d\u0629 \u0643\u0633\u0648\u0631\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633 \u0637\u0628\", email: \"haydershaaban0@gmail.com\" },\n { id: 14, name: \"\u0645\u062d\u0645\u0648\u062f \u0639\u0645\u0627\u062f \u0631\u0633\u0648\u0644 \u0639\u0628\u062f\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0637\u0628\u064a\u0628 \u0645\u0645\u0627\u0631\u0633\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633 \u0637\u0628 \u0628\u064a\u0637\u0631\", email: \"mahmourasool@atu.edu.iq\" },\n { id: 15, name: \"\u0644\u064a\u062b \u0639\u0628\u062f \u0627\u0644\u0643\u0631\u064a\u0645 \u0639\u0628\u062f \u0627\u0644\u0631\u0633\u0648\u0644\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u062a\u0642\u0646\u064a\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"lythalfkhrany@gmail.com\" },\n { id: 16, name: \"\u062f\u0639\u0627\u0621 \u0641\u0627\u0636\u0644 \u0643\u0627\u0638\u0645 \u062d\u0633\u0646\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u0645\u0647\u0646\u062f\u0633\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"doaa.kadhim@atu.edu.iq\" },\n { id: 17, name: \"\u0635\u0627\u062f\u0642 \u063a\u0627\u0644\u0628 \u0639\u0632\u06cc\u0632 \u062d\u0633\u064a\u0646\", status: \"\u0645\u0644\u0627\u0643\", title: \"\u062a\u0642\u0646\u064a\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"saadq.hussein@atu.edu.iq\" },\n { id: 18, name: \"\u0645\u062d\u0645\u062f \u06a9\u0627\u0638\u0645 \u0637\u0627\u0647\u0631 \u062c\u0648\u0627\u062f\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0645\u0647\u0646\u062f\u0633 \u0627\u0637\u0631\u0627\u0641\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"mohamedktjm@gmail.com\" },\n { id: 19, name: \"\u0631\u0633\u0644 \u0643\u0631\u064a\u0645 \u0647\u0627\u062f\u064a \u0647\u0627\u0634\u0645\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0645\u0647\u0646\u062f\u0633 \u0627\u0637\u0631\u0627\u0641\", degree: \"\u0628\u0643\u0627\u0644\u0648\u0631\u064a\u0648\u0633\", email: \"gawzaa667788@gmail.com\" },\n { id: 20, name: \"\u0645\u064a\u0627\u062f\u0629 \u0643\u0627\u0638\u0645 \u0646\u0648\u0631 \u0645\u062d\u0633\u0646\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f\", degree: \"\u062f\u0628\u0644\u0648\u0645 \u062a\u0642\u0646\u064a\", email: \"meiadaalatheri@gmail.com\" },\n { id: 21, name: \"\u0639\u0644\u064a \u062c\u0648\u0627\u062f \u0647\u0627\u062f\u064a \u0639\u0628\u062f\", status: \"\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a\", title: \"\u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f\", degree: \"\u062f\u0628\u0644\u0648\u0645 \u062a\u0642\u0646\u064a\", email: \"h2929hh@gmail.com\" }\n ];\n\n let currentStatus = \"\u0627\u0644\u0643\u0644\";\n\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0639\u062f\u0627\u062f\u0627\u062a\n function updateCounts() {\n document.getElementById('count-all').innerText = staffData.length;\n document.getElementById('count-staff').innerText = staffData.filter(s => s.status === '\u0645\u0644\u0627\u0643').length;\n document.getElementById('count-lecturers').innerText = staffData.filter(s => s.status === '\u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a').length;\n }\n\n \/\/ \u0628\u0646\u0627\u0621 \u0648\u0639\u0631\u0636 \u0627\u0644\u0643\u0631\u0648\u062a\n function renderCards(data) {\n const grid = document.getElementById('cardsGrid');\n grid.innerHTML = '';\n\n if (data.length === 0) {\n grid.innerHTML = `<div style=\"grid-column: 1\/-1; text-align:center; padding:40px; color:var(--text-muted);\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0646\u062a\u0627\u0626\u062c \u0645\u0637\u0627\u0628\u0642\u0629 \u0644\u0628\u062d\u062b\u0643.<\/div>`;\n return;\n }\n\n data.forEach(item => {\n const card = document.createElement('div');\n card.className = 'card';\n const initial = item.name.trim().charAt(0) || '\u0623';\n\n card.innerHTML = `\n <div class=\"card-number\">#${item.id}<\/div>\n <div>\n <div class=\"card-header\">\n <div class=\"avatar\">${initial}<\/div>\n <div class=\"user-info\">\n <h3>${item.name}<\/h3>\n <span class=\"status-badge\"><i class=\"fa-solid fa-id-badge\"><\/i> ${item.status}<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card-details\">\n <div class=\"detail-row\">\n <span class=\"detail-label\"><i class=\"fa-solid fa-award\"><\/i> \u0627\u0644\u0644\u0642\u0628 \u0627\u0644\u0639\u0644\u0645\u0649 \/ \u0627\u0644\u0648\u0638\u064a\u0641\u064a<\/span>\n <span class=\"detail-value\">${item.title}<\/span>\n <\/div>\n <div class=\"detail-row\">\n <span class=\"detail-label\"><i class=\"fa-solid fa-graduation-cap\"><\/i> \u0627\u0644\u0634\u0647\u0627\u062f\u0629 \u0627\u0644\u062d\u0627\u0635\u0644 \u0639\u0644\u064a\u0647\u0627<\/span>\n <span class=\"detail-value\">${item.degree}<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"email-section\">\n ${item.email ? `\n <span class=\"email-text\">${item.email}<\/span>\n <button class=\"copy-btn\" onclick=\"copyEmail('${item.email}')\" title=\"\u0646\u0633\u062e \u0627\u0644\u0625\u064a\u0645\u064a\u0644\">\n <i class=\"fa-regular fa-copy\"><\/i>\n <\/button>\n ` : `\n <span class=\"no-email\"><i class=\"fa-solid fa-circle-info\"><\/i> \u0627\u0644\u0628\u0631\u064a\u062f \u063a\u064a\u0631 \u0645\u062f\u0631\u062c<\/span>\n `}\n <\/div>\n `;\n grid.appendChild(card);\n });\n }\n\n \/\/ \u0627\u0644\u0641\u0644\u062a\u0631\u0629\n function filterCategory(status, event) {\n currentStatus = status;\n document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));\n event.currentTarget.classList.add('active');\n filterData();\n }\n\n function filterData() {\n const query = document.getElementById('searchInput').value.toLowerCase().trim();\n const filtered = staffData.filter(item => {\n const matchesStatus = (currentStatus === \"\u0627\u0644\u0643\u0644\" || item.status === currentStatus);\n const matchesSearch = item.name.toLowerCase().includes(query) ||\n item.title.toLowerCase().includes(query) ||\n item.degree.toLowerCase().includes(query) ||\n item.status.toLowerCase().includes(query) ||\n item.email.toLowerCase().includes(query);\n return matchesStatus && matchesSearch;\n });\n renderCards(filtered);\n }\n\n function copyEmail(email) {\n navigator.clipboard.writeText(email).then(() => {\n const toast = document.getElementById('toast');\n toast.classList.add('show');\n setTimeout(() => toast.classList.remove('show'), 2500);\n });\n }\n\n document.getElementById('searchInput').addEventListener('input', filterData);\n updateCounts();\n renderCards(staffData);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0627\u0644\u0641\u0646\u064a \/ \u0642\u0633\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f \u0623\u0639\u0636\u0627\u0621 \u0627\u0644\u0643\u0627\u062f\u0631 \u0627\u0644\u062a\u062f\u0631\u064a\u0633\u064a \u0648\u0627\u0644\u0641\u0646\u064a \/ \u0642\u0633\u0645 \u062a\u0642\u0646\u064a\u0627\u062a \u0635\u0646\u0627\u0639\u0629 \u0627\u0644\u0623\u0637\u0631\u0627\u0641 \u0648\u0627\u0644\u0645\u0633\u0627\u0646\u062f \u0644\u0644\u062f\u0631\u0627\u0633\u062a\u064a\u0646 \u0627\u0644\u0635\u0628\u0627\u062d\u064a\u0629 \u0648\u0627\u0644\u0645\u0633\u0627\u0626\u064a\u0629 \u0644\u0644\u0639\u0627\u0645 \u0627\u0644\u062f\u0631\u0627\u0633\u064a \u0662\u0660\u0662\u0666-\u0662\u0660\u0662\u0667 \u0627\u0644\u0643\u0644 0 \u0645\u0644\u0627\u0643 0 \u0645\u062d\u0627\u0636\u0631 \u062e\u0627\u0631\u062c\u064a 0 \u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0628\u0646\u062c\u0627\u062d!<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-43632","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/43632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=43632"}],"version-history":[{"count":4,"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/43632\/revisions"}],"predecessor-version":[{"id":43636,"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=\/wp\/v2\/pages\/43632\/revisions\/43636"}],"wp:attachment":[{"href":"https:\/\/iku.atu.edu.iq\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=43632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}