{"id":649,"date":"2026-02-05T20:42:01","date_gmt":"2026-02-05T18:42:01","guid":{"rendered":"https:\/\/blogs.sun.ac.za\/mod\/?page_id=649"},"modified":"2026-03-31T19:29:28","modified_gmt":"2026-03-31T17:29:28","slug":"current-opportunities","status":"publish","type":"page","link":"https:\/\/blogs.sun.ac.za\/mod\/current-opportunities\/","title":{"rendered":"Current opportunities"},"content":{"rendered":"<div id=\"project-board-container\" style=\"grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 20px\">Loading&#8230;<\/div>\n<p><style>\r\n    \/* New Hover Effect Class *\/\r\n    .project-card-interactive {\r\n        transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n    }\r\n    .project-card-interactive:hover {\r\n        transform: translateY(-2px); \/* Slight lift *\/\r\n        box-shadow: 0 10px 15px rgba(0,0,0,0.1) !important; \/* Soft shadow *\/\r\n    }\r\n<\/style>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    \/\/ 1. SETTINGS\r\n    const containerId = 'project-board-container';\r\n    \/\/ Your URL\r\n    const apiUrl = 'https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/research_project?per_page=100&_embed';\r\n\r\n    \/\/ 2. FETCH DATA\r\n    fetch(apiUrl)\r\n        .then(response => {\r\n            if (!response.ok) throw new Error('API Error');\r\n            return response.json();\r\n        })\r\n        .then(posts => {\r\n            const container = document.getElementById(containerId);\r\n            let html = '';\r\n\r\n            if(posts.length === 0) {\r\n                container.innerHTML = '<p>No current projects listed.<\/p>';\r\n                return;\r\n            }\r\n\r\n            \/\/ ALPHABETICAL SORT\r\n            posts.sort((a, b) => {\r\n                const titleA = a.title.rendered.toLowerCase();\r\n                const titleB = b.title.rendered.toLowerCase();\r\n                return titleA.localeCompare(titleB);\r\n            });\r\n\r\n            posts.forEach(post => {\r\n                \/\/ DATA EXTRACTION\r\n                const title = post.title.rendered;\r\n                const description = post.content.rendered; \r\n                \r\n                \/\/ ACF FIELDS\r\n                const supervisor = post.acf?.project_supervisor || 'TBA'; \r\n                const supervisorEmail = post.acf?.supervisor_email || '';\r\n                const degree = post.acf?.project_degree || 'Masters\/PhD'; \r\n\r\n                \/\/ --- SAFETY LOGIC (Kept for border colors) ---\r\n                let rawStatus = post.acf?.funding_available;\r\n                if (!rawStatus || rawStatus === true || rawStatus === '1') rawStatus = 'Self-funded';\r\n                \r\n                let fundingStatus = String(rawStatus); \r\n                let cleanStatus = fundingStatus.replace(\/_\/g, ' ');\r\n\r\n                \/\/ COLOR LOGIC (Used for the card border only)\r\n                let badgeColor = '#cbd5e0'; \/\/ Default Grey\r\n                const statusLower = cleanStatus.toLowerCase();\r\n\r\n                if (statusLower.includes('fully')) {\r\n                    badgeColor = '#22c55e'; \/\/ Green\r\n                } else if (statusLower.includes('potential')) {\r\n                    badgeColor = '#3182ce'; \/\/ Blue\r\n                } else if (statusLower.includes('requires')) {\r\n                    badgeColor = '#dd6b20'; \/\/ Orange\r\n                } else {\r\n                    badgeColor = '#718096'; \/\/ Grey (Self-funded)\r\n                }\r\n\r\n                \/\/ EMAIL BUTTON LOGIC\r\n                const mailLink = supervisorEmail \r\n                    ? `mailto:${supervisorEmail}?subject=Project Inquiry: ${encodeURIComponent(title)}`\r\n                    : `mailto:?subject=Project Inquiry: ${encodeURIComponent(title)}`;\r\n\r\n                \/\/ 3. BUILD THE CARD\r\n                \/\/ ADDED: class=\"project-card-interactive\" to trigger the hover effect\r\n                html += `\r\n                <div class=\"project-card-interactive\" style=\"border: 1px solid #e2e8f0; border-left: 5px solid ${badgeColor}; background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 25px; border-radius: 4px; overflow: hidden;\">\r\n                    \r\n                    <div style=\"display: flex; flex-direction: row; flex-wrap: wrap;\">\r\n                        \r\n                        <div style=\"flex: 1 1 250px; padding: 25px; background: #f8fafc; border-right: 1px solid #edf2f7;\">\r\n                            \r\n                            <h3 style=\"margin-top:0; color:#2d3748; font-size:1.2rem; line-height: 1.4;\">${title}<\/h3>\r\n                            \r\n                            <div style=\"margin-top: 15px; font-size: 0.95rem; color: #4a5568;\">\r\n                                <strong>Supervisor:<\/strong><br>${supervisor}\r\n                            <\/div>\r\n\r\n                            <div style=\"margin-top: 15px; font-size: 0.95rem; color: #4a5568;\">\r\n                                <strong>Degree:<\/strong><br>${degree}\r\n                            <\/div>\r\n\r\n                            <a href=\"${mailLink}\" style=\"display: inline-block; margin-top: 20px; text-decoration: none; color: #3182ce; font-weight: bold; font-size: 0.9rem; border: 1px solid #3182ce; padding: 8px 12px; border-radius: 4px; transition: background 0.2s;\">\r\n                                Email Supervisor &rarr;\r\n                            <\/a>\r\n                        <\/div>\r\n\r\n                        <div style=\"flex: 2 1 400px; padding: 25px;\">\r\n                            <h4 style=\"margin-top: 0; color: #718096; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;\">Project Description<\/h4>\r\n                            <div style=\"color: #2d3748; line-height: 1.6; font-size: 1rem;\">\r\n                                ${description}\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n                <\/div>\r\n                `;\r\n            });\r\n\r\n            container.innerHTML = html;\r\n        })\r\n        .catch(err => {\r\n            console.error(err);\r\n            document.getElementById(containerId).innerHTML = '<p><em>Loading failed.<\/em><\/p>';\r\n        });\r\n});\r\n<\/script><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>Loading&#8230;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":17903,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-649","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/pages\/649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/users\/17903"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/comments?post=649"}],"version-history":[{"count":4,"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/pages\/649\/revisions"}],"predecessor-version":[{"id":663,"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/pages\/649\/revisions\/663"}],"wp:attachment":[{"href":"https:\/\/blogs.sun.ac.za\/mod\/wp-json\/wp\/v2\/media?parent=649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}