render.js

/**
 * render.js - Modular rendering functions for UITS_Job_Hunters SPA
 * Builds dynamic DOM structures from data.json without external libraries.
 */

const Render = {
  /**
   * Escape HTML special characters for security
   */
  escapeHtml(str) {
    if (typeof str !== 'string') return str;
    return str
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  },

  /**
   * Render Filterable "Hire Us" Talent Showcase Section
   */
  renderHireUs(candidates, container, activeSkillCategory = 'All', activeAcademicLevel = 'All', searchQuery = '') {
    if (!container) return;

    if (!candidates || candidates.length === 0) {
      container.innerHTML = `<div class="empty-state">No candidate profiles available.</div>`;
      return;
    }

    // Unique skillset categories
    const skillCategories = ['All', ...new Set(candidates.map(c => c.skillsetCategory).filter(Boolean))];
    const academicLevels = ['All', 'Student', 'Graduated'];

    // Filter candidate list
    const filtered = candidates.filter(cand => {
      const matchesSkill = activeSkillCategory === 'All' || cand.skillsetCategory === activeSkillCategory;
      const matchesAcademic = activeAcademicLevel === 'All' || cand.academicLevel === activeAcademicLevel;
      const q = searchQuery.toLowerCase().trim();
      const matchesSearch = !q ||
        cand.name.toLowerCase().includes(q) ||
        cand.title.toLowerCase().includes(q) ||
        cand.bio.toLowerCase().includes(q) ||
        cand.academicLevel.toLowerCase().includes(q) ||
        (cand.skills && cand.skills.some(s => s.toLowerCase().includes(q)));

      return matchesSkill && matchesAcademic && matchesSearch;
    });

    // Control bar HTML
    let controlsHtml = `
      <div class="hire-controls-wrapper">
        <!-- Skillset Filters -->
        <div class="filter-group-container">
          <span class="filter-label">Skillset:</span>
          <div class="hire-skill-filters">
    `;
    skillCategories.forEach(cat => {
      const activeClass = cat === activeSkillCategory ? 'active' : '';
      controlsHtml += `
        <button class="filter-btn hire-skill-btn ${activeClass}" data-skill-cat="${this.escapeHtml(cat)}">
          ${this.escapeHtml(cat)}
        </button>
      `;
    });
    controlsHtml += `
          </div>
        </div>

        <!-- Academic Level Filters -->
        <div class="filter-group-container">
          <span class="filter-label">Academic Level:</span>
          <div class="hire-academic-filters">
    `;
    academicLevels.forEach(lvl => {
      const activeClass = lvl === activeAcademicLevel ? 'active' : '';
      controlsHtml += `
        <button class="filter-btn hire-academic-btn ${activeClass}" data-academic-lvl="${this.escapeHtml(lvl)}">
          ${this.escapeHtml(lvl)}
        </button>
      `;
    });
    controlsHtml += `
          </div>
        </div>
      </div>
    `;

    // Talent Grid HTML
    let gridHtml = `<div class="talent-grid">`;

    if (filtered.length === 0) {
      gridHtml += `<div class="empty-state">No candidates match your current skillset or academic filter criteria.</div>`;
    } else {
      filtered.forEach(cand => {
        const academicBadgeClass = cand.academicLevel === 'Graduated' ? 'badge-graduated' : 'badge-student';
        const skillPills = (cand.skills || [])
          .map(sk => `<span class="tech-tag">${this.escapeHtml(sk)}</span>`)
          .join('');

        gridHtml += `
          <div class="talent-card">
            <div class="talent-card-header">
              <div>
                <h3 class="talent-name">${this.escapeHtml(cand.name)}</h3>
                <p class="talent-title">${this.escapeHtml(cand.title)}</p>
              </div>
              <div class="talent-badges">
                <span class="academic-badge ${academicBadgeClass}">${this.escapeHtml(cand.academicLevel)}</span>
              </div>
            </div>

            <p class="talent-bio">${this.escapeHtml(cand.bio)}</p>

            <div class="talent-availability">
              <span class="avail-label">Availability:</span> ${this.escapeHtml(cand.availability)}
            </div>

            <div class="talent-skills-wrapper">
              <div class="tech-stack-list">${skillPills}</div>
            </div>

            <div class="talent-links-group">
              <a href="${this.escapeHtml(cand.githubUrl)}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline">
                <svg class="btn-icon" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
                </svg>
                GitHub
              </a>

              <a href="${this.escapeHtml(cand.linkedinUrl)}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline">
                <svg class="btn-icon" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                </svg>
                LinkedIn
              </a>

              <a href="${this.escapeHtml(cand.portfolioUrl)}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-primary">
                Portfolio / CV
                <svg class="btn-icon-right" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                  <polyline points="15 3 21 3 21 9"></polyline>
                  <line x1="10" y1="14" x2="21" y2="3"></line>
                </svg>
              </a>
            </div>
          </div>
        `;
      });
    }

    gridHtml += `</div>`;

    container.innerHTML = controlsHtml + gridHtml;
  },

  /**
   * Render Filterable Resources Section
   */
  renderResources(resources, container, activeCategory = 'All', searchQuery = '') {
    if (!container) return;

    if (!resources || resources.length === 0) {
      container.innerHTML = `<div class="empty-state">No resources available.</div>`;
      return;
    }

    // Collect all unique categories
    const categories = ['All', ...new Set(resources.map(r => r.category))];

    // Filter by active category and search query
    const filtered = resources.filter(res => {
      const matchesCategory = activeCategory === 'All' || res.category === activeCategory;
      const q = searchQuery.toLowerCase().trim();
      const matchesSearch = !q || 
        res.title.toLowerCase().includes(q) || 
        res.description.toLowerCase().includes(q) || 
        res.category.toLowerCase().includes(q) ||
        (res.tags && res.tags.some(tag => tag.toLowerCase().includes(q)));
      return matchesCategory && matchesSearch;
    });

    // Generate filter bar
    let filterBarHtml = `<div class="resource-filters">`;
    categories.forEach(cat => {
      const activeClass = cat === activeCategory ? 'active' : '';
      filterBarHtml += `
        <button class="filter-btn ${activeClass}" data-category="${this.escapeHtml(cat)}">
          ${this.escapeHtml(cat)}
        </button>
      `;
    });
    filterBarHtml += `</div>`;

    // Generate cards
    let gridHtml = `<div class="resources-grid">`;

    if (filtered.length === 0) {
      gridHtml += `<div class="empty-state">No matching resources found for "${this.escapeHtml(searchQuery)}" in ${this.escapeHtml(activeCategory)}.</div>`;
    } else {
      filtered.forEach(res => {
        const tagBadges = (res.tags || [])
          .map(t => `<span class="resource-tag">${this.escapeHtml(t)}</span>`)
          .join('');

        gridHtml += `
          <div class="resource-card">
            <div class="resource-header">
              <span class="category-badge">${this.escapeHtml(res.category)}</span>
            </div>
            <h3 class="resource-title">${this.escapeHtml(res.title)}</h3>
            <p class="resource-description">${this.escapeHtml(res.description)}</p>
            <div class="resource-tags">${tagBadges}</div>
            <div class="resource-footer">
              <a href="${this.escapeHtml(res.url)}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-primary">
                Access Resource
                <svg class="btn-icon-right" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="5" y1="12" x2="19" y2="12"></line>
                  <polyline points="12 5 19 12 12 19"></polyline>
                </svg>
              </a>
            </div>
          </div>
        `;
      });
    }

    gridHtml += `</div>`;

    container.innerHTML = filterBarHtml + gridHtml;
  },

  /**
   * Render Join Us / Community Onboarding Section
   */
  renderCommunity(channels, container) {
    if (!container) return;

    if (!channels || channels.length === 0) {
      container.innerHTML = `<div class="empty-state">No community links configured.</div>`;
      return;
    }

    let html = `<div class="community-grid">`;

    channels.forEach(ch => {
      let stepsList = '';
      if (ch.steps && ch.steps.length > 0) {
        stepsList = `<ol class="steps-list">` +
          ch.steps.map(s => `<li>${this.escapeHtml(s)}</li>`).join('') +
          `</ol>`;
      }

      html += `
        <div class="community-card">
          <div class="community-header">
            <h3 class="community-name">${this.escapeHtml(ch.name)}</h3>
            <span class="community-badge">${this.escapeHtml(ch.badge)}</span>
          </div>
          <p class="community-desc">${this.escapeHtml(ch.description)}</p>
          <div class="community-steps-wrapper">
            <h4 class="steps-heading">Onboarding Steps:</h4>
            ${stepsList}
          </div>
          <div class="community-action">
            <a href="${this.escapeHtml(ch.link)}" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-block">
              Connect on ${this.escapeHtml(ch.name)}
            </a>
          </div>
        </div>
      `;
    });

    html += `</div>`;

    // Membership verification block
    html += `
      <div class="verification-box">
        <h3 class="verification-title">Daily Accountability and Membership Verification</h3>
        <p class="verification-text">
          Once you join any community channel, complete your verification by introducing yourself in the community lobby with your name, target role, and GitHub handle. Maintain active status by logging daily commit streaks or technical updates.
        </p>
      </div>
    `;

    container.innerHTML = html;
  },

  /**
   * Render Learn More / Mission & Philosophy Section
   */
  renderLearnMore(learnData, container) {
    if (!container) return;

    if (!learnData) {
      container.innerHTML = `<div class="empty-state">No details available.</div>`;
      return;
    }

    let philosophiesHtml = `<div class="philosophies-grid">`;
    if (learnData.philosophies && learnData.philosophies.length > 0) {
      learnData.philosophies.forEach(ph => {
        philosophiesHtml += `
          <div class="philosophy-card">
            <h4 class="philosophy-title">${this.escapeHtml(ph.title)}</h4>
            <p class="philosophy-desc">${this.escapeHtml(ph.description)}</p>
          </div>
        `;
      });
    }
    philosophiesHtml += `</div>`;

    const parent = learnData.parentProject || {};

    let html = `
      <div class="learn-hero-box">
        <h3 class="learn-heading">Mission Statement</h3>
        <p class="mission-text">${this.escapeHtml(learnData.mission)}</p>
      </div>

      <div class="section-subtitle-wrapper">
        <h3 class="sub-heading">Core Growth Philosophies</h3>
      </div>
      ${philosophiesHtml}

      <div class="parent-feature-card">
        <div class="parent-card-content">
          <span class="umbrella-badge">Parent Umbrella Project</span>
          <h3 class="parent-title">${this.escapeHtml(parent.title || 'oU1TS Initiative')}</h3>
          <p class="parent-desc">${this.escapeHtml(parent.description || 'Connecting technology learners and job hunters.')}</p>
          <a href="${this.escapeHtml(parent.url || 'https://ou1ts.netlify.app/')}" target="_blank" rel="noopener noreferrer" class="btn btn-outline btn-parent">
            Visit Parent Hub (ou1ts.netlify.app)
            <svg class="btn-icon-right" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
              <polyline points="15 3 21 3 21 9"></polyline>
              <line x1="10" y1="14" x2="21" y2="3"></line>
            </svg>
          </a>
        </div>
      </div>
    `;

    container.innerHTML = html;
  }
};