{{ extends "./layout" }}

{{ block documentBody() }}
<div class="services-page">
    <h2 class="section-title">Services</h2>
    <p class="section-description">Manage all your running services</p>
    <div class="two-column-layout">
        <div class="card">
            <div class="card-title">Active Services</div>
            <div class="card-actions">
                <button class="button refresh" onclick="refreshServices()">Refresh</button>
            </div>
            
            <!-- Service list -->
            <div id="services-table">
                {{ include "./services_fragment" }}
            </div>
        </div>
        <div class="card">
            <div class="card-title">Start New Service</div>
            <div class="card-content">
                <form id="start-service-form" onsubmit="startService(event)">
                    <div class="form-group">
                        <label for="service-name">Service Name</label>
                        <input id="service-name" type="text" name="name" required="required">
                    </div>
                    
                    <div class="form-group">
                        <label for="service-command">Command</label>
                        <input id="service-command" type="text" name="command" required="required">
                    </div>
                    
                    <div class="form-actions">
                        <button class="button" type="submit">Start Service</button>
                    </div>
                </form>
            </div>
            
            <div id="start-result" class="alert" style="display: none"></div>
        </div>
    </div>
</div>
{{ end }}

{{ block scripts() }}
<script src="/js/services.js"></script>
{{ end }}