{% extends "base.html" %}

{% block title %}System Dependencies - DigiServer v2{% endblock %}

{% block content %}
<div class="container" style="max-width: 1000px;">
    <h1 style="margin-bottom: 25px;">🔧 System Dependencies</h1>
    
    <div class="card" style="margin-bottom: 20px;">
        <h2 style="margin-bottom: 20px;">📦 Installed Dependencies</h2>
        
        <!-- LibreOffice -->
        <div class="dependency-card" style="background: {% if libreoffice_installed %}#d4edda{% else %}#f8d7da{% endif %}; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid {% if libreoffice_installed %}#28a745{% else %}#dc3545{% endif %};">
            <div style="display: flex; justify-content: space-between; align-items: start;">
                <div style="flex: 1;">
                    <h3 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px;">
                        {% if libreoffice_installed %}
                        <span style="font-size: 24px;">✅</span>
                        {% else %}
                        <span style="font-size: 24px;">❌</span>
                        {% endif %}
                        LibreOffice
                    </h3>
                    <p style="margin: 5px 0; color: #555;">
                        <strong>Purpose:</strong> Required for PowerPoint (PPTX/PPT) to image conversion
                    </p>
                    <p style="margin: 5px 0; color: #555;">
                        <strong>Status:</strong> {{ libreoffice_version }}
                    </p>
                    {% if not libreoffice_installed %}
                    <p style="margin: 10px 0 0 0; color: #721c24;">
                        ⚠️ Without LibreOffice, you cannot upload or convert PowerPoint presentations.
                    </p>
                    {% endif %}
                </div>
                {% if not libreoffice_installed %}
                <form method="POST" action="{{ url_for('admin.install_libreoffice') }}" style="margin-left: 20px;">
                    <button type="submit" class="btn btn-success" onclick="return confirm('Install LibreOffice? This may take 2-5 minutes.');">
                        📥 Install LibreOffice
                    </button>
                </form>
                {% endif %}
            </div>
        </div>
        
        <!-- Poppler Utils -->
        <div class="dependency-card" style="background: {% if poppler_installed %}#d4edda{% else %}#fff3cd{% endif %}; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid {% if poppler_installed %}#28a745{% else %}#ffc107{% endif %};">
            <div style="display: flex; justify-content: space-between; align-items: start;">
                <div style="flex: 1;">
                    <h3 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px;">
                        {% if poppler_installed %}
                        <span style="font-size: 24px;">✅</span>
                        {% else %}
                        <span style="font-size: 24px;">⚠️</span>
                        {% endif %}
                        Poppler Utils
                    </h3>
                    <p style="margin: 5px 0; color: #555;">
                        <strong>Purpose:</strong> Required for PDF to image conversion
                    </p>
                    <p style="margin: 5px 0; color: #555;">
                        <strong>Status:</strong> {{ poppler_version }}
                    </p>
                </div>
            </div>
        </div>
        
        <!-- FFmpeg -->
        <div class="dependency-card" style="background: {% if ffmpeg_installed %}#d4edda{% else %}#fff3cd{% endif %}; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid {% if ffmpeg_installed %}#28a745{% else %}#ffc107{% endif %};">
            <div style="display: flex; justify-content: space-between; align-items: start;">
                <div style="flex: 1;">
                    <h3 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px;">
                        {% if ffmpeg_installed %}
                        <span style="font-size: 24px;">✅</span>
                        {% else %}
                        <span style="font-size: 24px;">⚠️</span>
                        {% endif %}
                        FFmpeg
                    </h3>
                    <p style="margin: 5px 0; color: #555;">
                        <strong>Purpose:</strong> Required for video processing and validation
                    </p>
                    <p style="margin: 5px 0; color: #555;">
                        <strong>Status:</strong> {{ ffmpeg_version }}
                    </p>
                </div>
            </div>
        </div>
        
        <!-- Emoji Fonts -->
        <div class="dependency-card" style="background: {% if emoji_installed %}#d4edda{% else %}#fff3cd{% endif %}; padding: 20px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid {% if emoji_installed %}#28a745{% else %}#ffc107{% endif %};">
            <div style="display: flex; justify-content: space-between; align-items: start;">
                <div style="flex: 1;">
                    <h3 style="margin: 0 0 10px 0; display: flex; align-items: center; gap: 10px;">
                        {% if emoji_installed %}
                        <span style="font-size: 24px;">✅</span>
                        {% else %}
                        <span style="font-size: 24px;">⚠️</span>
                        {% endif %}
                        Emoji Fonts
                    </h3>
                    <p style="margin: 5px 0; color: #555;">
                        <strong>Purpose:</strong> Better emoji display in UI (optional, mainly for Raspberry Pi)
                    </p>
                    <p style="margin: 5px 0; color: #555;">
                        <strong>Status:</strong> {{ emoji_version }}
                    </p>
                    {% if not emoji_installed %}
                    <p style="margin: 10px 0 0 0; color: #856404;">
                        ℹ️ Optional: Improves emoji rendering on systems without native emoji support.
                    </p>
                    {% endif %}
                </div>
                {% if not emoji_installed %}
                <form method="POST" action="{{ url_for('admin.install_emoji_fonts') }}" style="margin-left: 20px;">
                    <button type="submit" class="btn btn-warning" onclick="return confirm('Install emoji fonts? This may take 1-2 minutes.');">
                        📥 Install Emoji Fonts
                    </button>
                </form>
                {% endif %}
            </div>
        </div>
        
        <div style="margin-top: 25px; padding: 15px; background: #e7f3ff; border-radius: 8px; border-left: 4px solid #0066cc;">
            <h4 style="margin: 0 0 10px 0;">ℹ️ Installation Notes</h4>
            <ul style="margin: 5px 0; padding-left: 25px; color: #555;">
                <li>LibreOffice can be installed using the button above (requires sudo access)</li>
                <li>Emoji fonts improve UI display, especially on Raspberry Pi systems</li>
                <li>Installation may take 1-5 minutes depending on your internet connection</li>
                <li>After installation, refresh this page to verify the status</li>
                <li>Docker containers may require rebuilding to include dependencies</li>
            </ul>
        </div>
    </div>
    
    <div style="margin-top: 20px;">
        <a href="{{ url_for('admin.admin_panel') }}" class="btn btn-secondary">
            ← Back to Admin Panel
        </a>
    </div>
</div>

<style>
    body.dark-mode .dependency-card {
        color: #e2e8f0 !important;
    }
    
    body.dark-mode .dependency-card p {
        color: #cbd5e0 !important;
    }
    
    body.dark-mode .dependency-card[style*="#d4edda"] {
        background: #1e4620 !important;
        border-left-color: #48bb78 !important;
    }
    
    body.dark-mode .dependency-card[style*="#f8d7da"] {
        background: #5a1e1e !important;
        border-left-color: #ef5350 !important;
    }
    
    body.dark-mode .dependency-card[style*="#fff3cd"] {
        background: #5a4a1e !important;
        border-left-color: #ffc107 !important;
    }
    
    body.dark-mode div[style*="#e7f3ff"] {
        background: #1e3a5f !important;
        border-left-color: #64b5f6 !important;
    }
    
    body.dark-mode div[style*="#e7f3ff"] ul {
        color: #cbd5e0 !important;
    }
</style>
{% endblock %}