{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{{ name }} - {% trans "Container Management" %}{% endblock %}
{% block content %}

{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->

<style>
    .modern-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    .page-header {
        text-align: center;
        margin-bottom: 3rem;
        padding: 3rem 0;
        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
        border-radius: 20px;
        animation: fadeInDown 0.5s ease-out;
        position: relative;
        overflow: hidden;
    }
    
    .page-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 70% 30%, var(--accent-shadow-light, rgba(91, 95, 207, 0.15)) 0%, transparent 50%);
        animation: rotate 30s linear infinite;
    }
    
    .container-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
    }
    
    .container-icon-large {
        width: 80px;
        height: 80px;
        background: var(--bg-secondary, white);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 24px var(--shadow-medium, rgba(0,0,0,0.1));
    }
    
    .container-title-section {
        text-align: left;
    }
    
    .container-name {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--text-primary, #1e293b);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .container-id {
        font-size: 0.875rem;
        color: var(--text-secondary, #64748b);
        margin-top: 0.5rem;
        font-family: monospace;
    }
    
    .status-badge {
        padding: 0.5rem 1rem;
        border-radius: 12px;
        font-size: 0.875rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        animation: pulse 2s infinite;
        transition: all 0.3s ease;
    }
    
    .status-badge.status-changed {
        animation: statusChange 0.6s ease-out;
    }
    
    @keyframes statusChange {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
    
    .status-running {
        background: var(--success-bg, #d1fae5);
        color: var(--success-text, #065f46);
    }
    
    .status-stopped {
        background: #fee2e2;
        color: #991b1b;
    }
    
    .status-paused {
        background: #fef3c7;
        color: #92400e;
    }
    
    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        animation: blink 2s infinite;
    }
    
    .status-running .status-dot {
        background: var(--success-color, #10b981);
    }
    
    .status-stopped .status-dot {
        background: var(--danger-color, #ef4444);
        animation: none;
    }
    
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    
    .refresh-icon {
        cursor: pointer;
        color: var(--text-secondary, #64748b);
        transition: all 0.3s ease;
    }
    
    .refresh-icon:hover {
        color: var(--accent-color, #5b5fcf);
        transform: rotate(180deg);
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        background: var(--bg-secondary, white);
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
        border: 1px solid var(--border-color, #e8e9ff);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, var(--accent-focus, rgba(91, 95, 207, 0.1)) 0%, transparent 100%);
        border-radius: 0 0 0 100%;
    }
    
    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px var(--accent-shadow-light, rgba(91, 95, 207, 0.15));
    }
    
    .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    
    .stat-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary, #64748b);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        background: var(--accent-bg, #e0e7ff);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-color, #5b5fcf);
    }
    
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary, #1e293b);
        margin: 0.5rem 0;
    }
    
    .stat-subtitle {
        font-size: 0.875rem;
        color: var(--text-secondary, #64748b);
    }
    
    .progress-bar {
        width: 100%;
        height: 8px;
        background: #e8e9ff;
        border-radius: 4px;
        overflow: hidden;
        margin-top: 1rem;
    }
    
    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent-color, #5b5fcf) 0%, #7b7fd0 100%);
        border-radius: 4px;
        transition: width 0.5s ease;
    }
    
    .main-card {
        background: var(--bg-secondary, white);
        border-radius: 16px;
        box-shadow: 0 1px 3px var(--shadow-light, rgba(0,0,0,0.05)), 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
        border: 1px solid var(--border-color, #e8e9ff);
        overflow: hidden;
        margin-bottom: 2rem;
        animation: fadeInUp 0.5s ease-out;
    }
    
    .card-header {
        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
        padding: 1.5rem 2rem;
        border-bottom: 1px solid var(--border-color, #e8e9ff);
    }
    
    .card-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary, #1e293b);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .card-body {
        padding: 2rem;
    }
    
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    .info-item {
        background: var(--bg-hover, #f8f9ff);
        padding: 1rem;
        border-radius: 12px;
        border: 1px solid var(--border-color, #e8e9ff);
    }
    
    .info-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary, #64748b);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }
    
    .info-value {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text-primary, #1e293b);
        word-break: break-all;
    }
    
    .action-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
    }
    
    .action-btn {
        background: var(--bg-hover, #f8f9ff);
        border: 1px solid var(--border-color, #e8e9ff);
        padding: 1rem;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        text-decoration: none;
        color: var(--text-primary, #1e293b);
        position: relative;
        overflow: hidden;
    }
    
    .action-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: var(--accent-focus, rgba(91, 95, 207, 0.1));
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    
    .action-btn:hover::before {
        width: 200px;
        height: 200px;
    }
    
    .action-btn:hover {
        transform: translateY(-2px);
        border-color: var(--accent-color, #5b5fcf);
        box-shadow: 0 4px 12px var(--accent-shadow-soft, rgba(91, 95, 207, 0.2));
    }
    
    .action-btn.primary {
        background: var(--accent-color, #5b5fcf);
        color: var(--bg-secondary, white);
        border-color: var(--accent-color, #5b5fcf);
    }
    
    .action-btn.primary:hover {
        background: var(--accent-hover, #4547a9);
    }
    
    .action-btn.danger {
        background: #fee2e2;
        color: #ef4444;
        border-color: #fecaca;
    }
    
    .action-btn.danger:hover {
        background: #fecaca;
        border-color: #ef4444;
    }
    
    .action-btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    .action-icon {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        display: block;
        position: relative;
        z-index: 1;
    }
    
    .action-text {
        font-size: 0.875rem;
        font-weight: 500;
        position: relative;
        z-index: 1;
    }
    
    .terminal-card {
        background: #1a202c;
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 2rem;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }
    
    .terminal-header {
        background: #2d3748;
        padding: 1rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #4a5568;
    }
    
    .terminal-title {
        color: #e2e8f0;
        font-size: 0.875rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .terminal-controls {
        display: flex;
        gap: 0.5rem;
    }
    
    .terminal-btn {
        background: #4a5568;
        color: #e2e8f0;
        border: 1px solid #718096;
        padding: 0.375rem 0.75rem;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.75rem;
        font-weight: 500;
    }
    
    .terminal-btn:hover {
        background: #718096;
        color: var(--bg-secondary, white);
    }
    
    .terminal-content {
        font-family: 'SF Mono', Monaco, Consolas, monospace;
        font-size: 0.8125rem;
        line-height: 1.5;
        color: #e2e8f0;
        background: #1a202c;
        padding: 1.5rem;
        height: 400px;
        overflow-y: auto;
        white-space: pre-wrap;
    }
    
    .terminal-content::-webkit-scrollbar {
        width: 8px;
    }
    
    .terminal-content::-webkit-scrollbar-track {
        background: #2d3748;
    }
    
    .terminal-content::-webkit-scrollbar-thumb {
        background: #4a5568;
        border-radius: 4px;
    }
    
    .loading-spinner {
        width: 20px;
        height: 20px;
        border: 3px solid #e8e9ff;
        border-top-color: var(--accent-color, #5b5fcf);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        display: inline-block;
        margin-left: 1rem;
    }
    
    /* Modal Overrides */
    .modal-content {
        border-radius: 16px;
        overflow: hidden;
        border: none;
        box-shadow: 0 25px 50px -12px var(--shadow-dark, rgba(0, 0, 0, 0.25));
    }
    
    .modal-header {
        background: linear-gradient(135deg, var(--bg-hover, #f8f9ff) 0%, var(--bg-gradient, #f0f1ff) 100%);
        border-bottom: 1px solid var(--border-color, #e8e9ff);
        padding: 1.5rem 2rem;
    }
    
    .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary, #1e293b);
        margin: 0;
    }
    
    .modal-body {
        padding: 2rem;
    }
    
    .modal-footer {
        background: var(--bg-hover, #f8f9ff);
        border-top: 1px solid var(--border-color, #e8e9ff);
        padding: 1rem 2rem;
    }
    
    .modal-footer .btn {
        padding: 0.5rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.875rem;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }
    
    .modal-footer .btn-primary {
        background: var(--accent-color, #5b5fcf);
        color: var(--bg-secondary, white);
    }
    
    .modal-footer .btn-primary:hover {
        background: var(--accent-hover, #4547a9);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(91, 95, 207, 0.3);
    }
    
    .modal-footer .btn-default {
        background: #6b7280;
        color: var(--bg-secondary, white);
        margin-left: 0.5rem;
    }
    
    .modal-footer .btn-default:hover {
        background: #4b5563;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 var(--accent-shadow-hover, rgba(91, 95, 207, 0.4));
        }
        50% {
            box-shadow: 0 0 0 10px rgba(91, 95, 207, 0);
        }
    }
    
    @media (max-width: 768px) {
        .container-header {
            flex-direction: column;
            text-align: center;
        }
        
        .container-title-section {
            text-align: center;
        }
        
        .stats-grid {
            grid-template-columns: 1fr;
        }
        
        .action-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

<div class="modern-container" ng-controller="viewContainer">
    <div class="page-header">
        <div class="container-header">
            <div class="container-icon-large">
                <i class="fab fa-docker" style="color: var(--accent-color, #5b5fcf); font-size: 2.5rem;"></i>
            </div>
            <div class="container-title-section">
                <h1 class="container-name" ng-init="cName='{{ name }}';status='{{ status }}'">
                    {{ name }}
                    <span class="status-badge status-{{ status }}" ng-class="'status-' + status">
                        <span class="status-dot"></span>
                        <span ng-bind="status"></span>
                    </span>
                </h1>
                <div class="container-id">Container ID: {{ cid|slice:":12" }}...</div>
            </div>
            <i class="fas fa-sync refresh-icon" ng-click="refreshStatus()" title="{% trans 'Refresh status' %}"></i>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-header">
                <div>
                    <div class="stat-title">{% trans "CPU Usage" %}</div>
                    <div class="stat-value" ng-init="cpuUsage={{ cpuUsage }}">{{ cpuUsage }}%</div>
                    <div class="stat-subtitle">{% trans "Processing Power" %}</div>
                </div>
                <div class="stat-icon">
                    <i class="fas fa-microchip"></i>
                </div>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: {{ cpuUsage }}%"></div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div>
                    <div class="stat-title">{% trans "Memory Usage" %}</div>
                    <div class="stat-value" ng-init="memoryUsage={{ memoryUsage }}">{{ memoryUsage|floatformat:"1" }}%</div>
                    <div class="stat-subtitle">{% trans "RAM Utilization" %}</div>
                </div>
                <div class="stat-icon">
                    <i class="fas fa-memory"></i>
                </div>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: {{ memoryUsage }}%"></div>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-header">
                <div>
                    <div class="stat-title">{% trans "Memory Limit" %}</div>
                    <div class="stat-value" ng-init="memory={{ memoryLimit }}">{{ memoryLimit }} MB</div>
                    <div class="stat-subtitle">{% trans "Allocated Memory" %}</div>
                </div>
                <div class="stat-icon">
                    <i class="fas fa-server"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Container Information -->
    <div class="main-card">
        <div class="card-header">
            <h2 class="card-title">
                <i class="fas fa-info-circle"></i>
                {% trans "Container Information" %}
            </h2>
        </div>
        <div class="card-body">
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">{% trans "Image" %}</div>
                    <div class="info-value">{{ image }}</div>
                </div>
                {% if ports %}
                <div class="info-item">
                    <div class="info-label">{% trans "Port Mappings" %}</div>
                    <div class="info-value">
                        {% for iport, eport in ports.items %}
                            <span style="background: var(--accent-bg, #e0e7ff); padding: 0.25rem 0.5rem; border-radius: 4px; margin-right: 0.5rem;">
                                {{ iport }} → {{ eport }}
                            </span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
                <div class="info-item">
                    <div class="info-label">{% trans "Restart Policy" %}</div>
                    <div class="info-value" ng-init="rPolicy='{{ restartPolicy }}'" ng-bind="rPolicy"></div>
                </div>
                <div class="info-item">
                    <div class="info-label">{% trans "Start on Boot" %}</div>
                    <div class="info-value" ng-init="startOnReboot={{ startOnReboot }}">
                        <span ng-if="startOnReboot" style="color: var(--success-color, #10b981);">
                            <i class="fas fa-check-circle"></i> {% trans "Enabled" %}
                        </span>
                        <span ng-if="!startOnReboot" style="color: var(--text-secondary, #64748b);">
                            <i class="fas fa-times-circle"></i> {% trans "Disabled" %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Container Actions -->
    <div class="main-card">
        <div class="card-header">
            <h2 class="card-title">
                <i class="fas fa-cogs"></i>
                {% trans "Container Actions" %}
                <img id="actionLoading" src="/static/images/loading.gif" style="display: none;" class="loading-spinner">
            </h2>
        </div>
        <div class="card-body">
            <div class="action-grid">
                <div class="action-btn" ng-click="cAction('start')" ng-disabled="status=='running'">
                    <i class="fas fa-play action-icon" style="color: var(--success-color, #10b981);"></i>
                    <div class="action-text">{% trans "Start" %}</div>
                </div>
                
                <div class="action-btn" ng-click="cAction('restart')" ng-disabled="status!='running'">
                    <i class="fas fa-sync-alt action-icon" style="color: var(--info-color, #3b82f6);"></i>
                    <div class="action-text">{% trans "Restart" %}</div>
                </div>
                
                <div class="action-btn" ng-click="cAction('stop')" ng-disabled="status!='running'">
                    <i class="fas fa-stop action-icon" style="color: var(--warning-color, #f59e0b);"></i>
                    <div class="action-text">{% trans "Stop" %}</div>
                </div>
                
                <div class="action-btn" ng-click="cAction('pause')" ng-disabled="status!='running'">
                    <i class="fas fa-pause action-icon" style="color: #8b5cf6;"></i>
                    <div class="action-text">{% trans "Pause" %}</div>
                </div>
                
                <div class="action-btn danger" ng-click="cRemove()">
                    <i class="fas fa-trash action-icon"></i>
                    <div class="action-text">{% trans "Remove" %}</div>
                </div>
                
                <div class="action-btn" data-toggle="modal" data-target="#settings">
                    <i class="fas fa-sliders-h action-icon" style="color: #6366f1;"></i>
                    <div class="action-text">{% trans "Settings" %}</div>
                </div>
                
                <div class="action-btn" ng-click="recreate()">
                    <i class="fas fa-redo action-icon" style="color: #06b6d4;"></i>
                    <div class="action-text">{% trans "Recreate" %}</div>
                </div>
                
                <a href="/docker/exportContainer/?name={{ name }}" class="action-btn">
                    <i class="fas fa-download action-icon" style="color: var(--success-color, #10b981);"></i>
                    <div class="action-text">{% trans "Export" %}</div>
                </a>
                
                <div class="action-btn" ng-click="showTop()" ng-disabled="loadingTop">
                    <i class="fas fa-terminal action-icon" style="color: #ec4899;"></i>
                    <div class="action-text">{% trans "Processes" %}</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Container Logs -->
    <div class="terminal-card" ng-init="loadLogs('{{ name }}')">
        <div class="terminal-header">
            <h3 class="terminal-title">
                <i class="fas fa-file-alt"></i>
                {% trans "Container Logs" %}
            </h3>
            <div class="terminal-controls">
                <button class="terminal-btn" ng-click="loadLogs('{{ name }}')">
                    <i class="fas fa-sync"></i> {% trans "Refresh" %}
                </button>
                <button class="terminal-btn" onclick="document.querySelector('.terminal-content').scrollTop = 0">
                    <i class="fas fa-arrow-up"></i> {% trans "Top" %}
                </button>
                <button class="terminal-btn" onclick="document.querySelector('.terminal-content').scrollTop = document.querySelector('.terminal-content').scrollHeight">
                    <i class="fas fa-arrow-down"></i> {% trans "Bottom" %}
                </button>
            </div>
        </div>
        <div class="terminal-content" ng-bind="logs"></div>
    </div>

    <!-- Settings Modal -->
    <div id="settings" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <i class="fas fa-cog" style="margin-right: 0.5rem;"></i>
                        {% trans "Container Settings" %}
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" 
                            style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
                </div>
                <div class="modal-body">
                    <form name="containerSettingsForm" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Memory Limit (MB)" %}</label>
                            <div class="col-sm-6">
                                <input name="memory" type="number" class="form-control" ng-model="memory" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Start on Reboot" %}</label>
                            <div class="col-sm-9">
                                <div class="checkbox">
                                    <label>
                                        <input ng-model="startOnReboot" type="checkbox">
                                        {% trans "Enable automatic startup" %}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <hr>
                        
                        <div class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Environment Variables" %}</label>
                            <div class="col-sm-9">
                                <div class="checkbox">
                                    <label>
                                        <input ng-model="envConfirmation" type="checkbox">
                                        <strong>{% trans "I understand that editing ENV or Volumes will recreate the container" %}</strong>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <!-- Environment Variables -->
                        <span ng-init="envList = {}"></span>
                        {% for env, value in envList.items %}
                            <span ng-init="envList[{{ forloop.counter0 }}] = {'name':'{{ env }}', 'value':'{{ value }}'}"></span>
                        {% endfor %}

                        <div ng-repeat="env in envList track by $index">
                            <div class="form-group">
                                <label class="col-sm-3 control-label" ng-show="$first">
                                    {% trans "Environment Variables" %}
                                </label>
                                <label class="col-sm-3" ng-hide="$first"></label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" ng-disabled="!envConfirmation" 
                                           ng-model="envList[$index].name" placeholder="Variable name" required>
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" ng-disabled="!envConfirmation" 
                                           ng-model="envList[$index].value" placeholder="Value" required>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-9">
                                <button type="button" class="btn btn-info" ng-disabled="!envConfirmation" 
                                        ng-click="addEnvField()">
                                    <i class="fas fa-plus"></i> {% trans "Add Environment Variable" %}
                                </button>
                            </div>
                        </div>

                        <hr>

                        <!-- Volume Mappings -->
                        <span ng-init="volList = {}; volListNumber = 1"></span>
                        {% for key, value in volList.items %}
                            <span ng-init="volList[{{ forloop.counter0 }}] = {'dest':'{{ value.bind }}', 'src':'{{ key }}'}"></span>
                            <span ng-init="volListNumber = {{ forloop.counter0 }} + 1"></span>
                        {% endfor %}

                        <div class="form-group">
                            <label class="col-sm-3 control-label">{% trans "Volume Mappings" %}</label>
                        </div>

                        <div ng-repeat="volume in volList track by $index">
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-4">
                                    <input type="text" class="form-control" ng-disabled="!envConfirmation" 
                                           ng-model="volList[$index].dest" placeholder="Container path" required>
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" class="form-control" ng-disabled="!envConfirmation" 
                                           ng-model="volList[$index].src" placeholder="Host path" required>
                                </div>
                                <div class="col-sm-1" ng-show="$last">
                                    <button class="btn btn-danger" type="button" ng-disabled="!envConfirmation" 
                                            ng-click="removeVolField()">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-9">
                                <button type="button" class="btn btn-info" ng-disabled="!envConfirmation" 
                                        ng-click="addVolField()">
                                    <i class="fas fa-plus"></i> {% trans "Add Volume Mapping" %}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <img id="containerSettingLoading" src="/static/images/loading.gif" style="display: none;" class="loading-spinner">
                    <button type="button" class="btn btn-primary" ng-disabled="savingSettings" ng-click="saveSettings()">
                        <i class="fas fa-save"></i> {% trans "Save Settings" %}
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <i class="fas fa-times"></i> {% trans "Cancel" %}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Processes Modal -->
    <div id="processes" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <i class="fas fa-terminal" style="margin-right: 0.5rem;"></i>
                        {% trans "Container Processes" %}
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" 
                            style="font-size: 1.5rem; background: transparent; border: none;">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th ng-repeat="item in topHead track by $index">{$ item $}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="process in topProcesses track by $index">
                                    <td ng-repeat="item in process track by $index">{$ item $}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" ng-click="showTop()">
                        <i class="fas fa-sync"></i> {% trans "Refresh" %}
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <i class="fas fa-times"></i> {% trans "Close" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block footer_scripts %}
<script src="{% static 'dockerManager/dockerManager.js' %}"></script>
{% endblock %}