<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ansible Playbooks - InfraHub</title>
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />

    <!-- Serve CSS via Flask -->
    <link rel="stylesheet" href="{{ url_for('pages.serve_css', filename='retro.css') }}">
</head>
<body>

    <header>
        <div class="header-inner">
            <div class="left">
                <img src="{{ url_for('pages.serve_png', filename='infrahublogo.png') }}" alt="InfraHub Logo" class="logo">
            </div>

            <nav>
            <ul class="navbar">
              <li><a href="{{ url_for('pages.index') }}"><i class="fa fa-house"></i> Home</a></li>
              <li><a href="{{ url_for('pages.isos') }}"><i class="fa fa-compact-disc"></i> ISOs</a></li>
              <li><a href="{{ url_for('pages.playbooks') }}"><i class="fa fa-scroll"></i> Playbooks</a></li>
              <li><a href="{{ url_for('pages.docker') }}"><i class="fab fa-docker"></i>Docker Sandbox</a></li>
              <li><a href="{{ url_for('pages.aws') }}"><i class="fab fa-aws"></i>AWS Guide</a></li>
              <li><a href="https://github.com/AJprogramming123/OpsCenter" target="_blank"><i class="fab fa-github"></i> GitHub</a></li>
            </ul>
            </nav>
        </div>
    </header>

    <!-- Go Back Home Button -->
    <div class="back-home">
        <a href="{{ url_for('pages.index') }}" class="btn back-btn"><i class="fa fa-arrow-left"></i> Go Back Home</a>
    </div>

<section class="sections">
  <div class="container">
    <h2>Department-Specific Playbooks</h2>

    <div class="cards">

      <!-- Talent Management -->
      <div class="card">
        <h3>Talent Management Department</h3>
        <p>Playbooks for Talent workflows including:</p>
        <ul>
          <li>PowerBI Desktop setup</li>
          <li>Office / Excel tooling</li>
          <li>Ubuntu workstation configuration</li>
        </ul>

        <a href="https://github.com/cpere684/infra-talent" target="_blank" class="btn">
          📁 View GitHub Repository
        </a>

        <hr class="divider">

        <h4 style="color:#2a4887;">🎥 Tutorial Video</h4>

        <div class="video-container">
          <iframe
            src="https://www.youtube.com/embed/9x3ZkkiX2xU"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
          </iframe>
        </div>
      </div>

      <!-- Accounting -->
      <div class="card">
        <h3>Accounting Department</h3>
        <p>Automates workstations for Accounting:</p>
        <ul>
          <li>Financial tooling</li>
          <li>Excel / PDF utilities</li>
          <li>Secure hardened Ubuntu setup</li>
        </ul>

        <a href="https://github.com/cpere684/infra-accounting" target="_blank" class="btn">
          📁 View GitHub Repository
        </a>

        <hr class="divider">

        <h4 style="color:#2a4887;">🎥 Tutorial Video</h4>

        <div class="video-container">
          <iframe
            src="https://www.youtube.com/embed/9x3ZkkiX2xU"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
          </iframe>
        </div>
      </div>

      <!-- IT Department -->
      <div class="card">
        <h3>IT Department</h3>
        <p>Automates a full IT workstation setup:</p>
        <ul>
          <li>Network configuration</li>
          <li>Security hardening</li>
          <li>Developer tools (Docker, Git, IDEs)</li>
        </ul>

        <a href="https://github.com/cpere684/infra-it" target="_blank" class="btn">
          📁 View GitHub Repository
        </a>

        <hr class="divider">

        <h4 style="color:#2a4887;">🎥 Tutorial Video</h4>

        <div class="video-container">
          <iframe
            src="https://www.youtube.com/embed/9x3ZkkiX2xU"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
          </iframe>
        </div>
      </div>

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

    <footer>
        <p>© 2025 InfraHub — Designed for Learning and Deployment</p>
    </footer>

</body>
</html>
