{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Deploy Ruby App" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Deploy Ruby App" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Create an isolated Ruby application environment for a website." %}</div>
        </div>
        <a href="{% url 'selector_ruby' %}" class="btn btn-outline-secondary"><i data-lucide="gem"></i>{% translate "Ruby Applications" %}</a>
    </div>
    <nav class="eenos-breadcrumb">
        <a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Applications" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Ruby" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "Deploy Ruby App" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Application Configuration" %}</h2>
                <p class="eenos-card-subtitle">{% translate "Choose the website, runtime, startup script, and environment." %}</p>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="rocket"></i>
            </div>
        </div>
        {% if havedomains %}
            <form method="post" id="deployRubyForm" class="eenos-form">
                {% csrf_token %}
                <div class="row g-3">
                    <div class="col-12 col-lg-6"><label for="deployDomain" class="form-label">{% translate "Website" %}</label><select id="deployDomain"
        name="domain"
        class="form-select eenos-select-search"
        required
        data-parsley-required-message="{% translate 'Please select a domain name.' %}"><option value="">{% translate "Select domain" %}</option>{% for domain in domains %}<option value="{{ domain }}">{{ domain }}</option>{% endfor %}</select></div>
                    <div class="col-12 col-lg-6"><label for="deployRuby" class="form-label">{% translate "Ruby Version" %}</label><select id="deployRuby"
        name="ruby"
        class="form-select eenos-select-search"
        required
        data-parsley-required-message="{% translate 'Please select a Ruby version.' %}"><option value="">{% translate "Select Ruby version" %}</option>{% for ruby in allruby %}<option value="{{ ruby }}" {% if ruby == default %}selected{% endif %}>{{ ruby }}</option>{% endfor %}</select></div>
                    <div class="col-12 col-md-6">
                        <label for="rubyStartup" class="form-label">{% translate "Startup Script" %}</label>
                        <input class="form-control"
                               id="rubyStartup"
                               name="rubystartup"
                               value="config.ru"
                               required
                               data-parsley-pattern="^([a-zA-Z0-9][\w-]*)\.ru$"
                               data-parsley-pattern-message="{% translate 'Enter a valid Ruby file name.' %}">
                    </div>
                    <div class="col-12 col-md-6"><label for="rubyPublic" class="form-label">{% translate "Public Directory" %}</label><div class="input-group"><span class="input-group-text" id="publicDirectoryPrefix"><i data-lucide="home"></i>&nbsp;{% translate "Select website" %}&nbsp;/</span><input class="form-control"
       id="rubyPublic"
       name="public"
       value="public"
       required></div><div class="form-text">{% translate "This directory will be created inside the selected website's document root." %}</div></div>
                    <div class="col-12 col-md-6">
                        <label for="rubyEnvironment" class="form-label">{% translate "Environment" %}</label>
                        <select class="form-select" id="rubyEnvironment" name="environment" required>
                            <option value="production">{% translate "Production" %}</option>
                            <option value="development">{% translate "Development" %}</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-6">
                        <label for="demoInstall" class="form-label">{% translate "Demo Application" %}</label>
                        <select class="form-select" id="demoInstall" name="demoinstall" required>
                            <option value="no">{% translate "No, I will upload the application" %}</option>
                            <option value="yes">{% translate "Install a demo application" %}</option>
                        </select>
                    </div>
                </div>
                <input type="hidden" name="deploy_app" value="yes">
            </form>
        {% else %}
            <div class="eenos-amber-notice eenos-amber-notice-warning mb-0">
                <div class="eenos-amber-notice-icon">
                    <i data-lucide="triangle-alert"></i>
                </div>
                <div class="eenos-amber-notice-content">
                    <div class="eenos-amber-notice-title">{% translate "No eligible websites" %}</div>
                    <div class="eenos-amber-notice-text">{% translate "Add another domain or remove an existing Ruby application before deploying a new one." %}</div>
                </div>
            </div>
        {% endif %}
    </div>
    {% if havedomains %}
        <div class="d-flex flex-column flex-sm-row gap-2 mt-3">
            <button type="button" class="btn btn-primary" id="reviewDeployment"><i data-lucide="rocket"></i>{% translate "Deploy Ruby App" %}</button>
            <a href="{% url 'selector_ruby' %}" class="btn btn-outline-secondary"><i data-lucide="arrow-left"></i>{% translate "Go Back" %}</a>
        </div>
    {% endif %}
    <div class="modal fade"
         id="deployModal"
         tabindex="-1"
         aria-labelledby="deployModalTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h2 class="modal-title fs-5 d-flex align-items-center gap-2"
                            id="deployModalTitle"><i data-lucide="rocket"></i>{% translate "Review Ruby Deployment" %}</h2>
                        <div class="small text-muted mt-1">{% translate "Confirm the application configuration before deployment." %}</div>
                    </div>
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="{% translate 'Close' %}"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3 mb-4">
                        <div class="col-12 col-md-6">
                            <div class="eenos-modal-info h-100">
                                <div class="eenos-modal-info-icon">
                                    <i data-lucide="globe-2"></i>
                                </div>
                                <div class="eenos-modal-info-content">
                                    <div class="eenos-modal-info-label">{% translate "Website" %}</div>
                                    <div class="eenos-modal-info-value text-break" id="deploymentDomain"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="eenos-modal-info h-100">
                                <div class="eenos-modal-info-icon">
                                    <i data-lucide="gem"></i>
                                </div>
                                <div class="eenos-modal-info-content">
                                    <div class="eenos-modal-info-label">{% translate "Ruby Runtime" %}</div>
                                    <div class="eenos-modal-info-value font-monospace" id="deploymentRuntime"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="eenos-modal-info h-100">
                                <div class="eenos-modal-info-icon">
                                    <i data-lucide="boxes"></i>
                                </div>
                                <div class="eenos-modal-info-content">
                                    <div class="eenos-modal-info-label">{% translate "Application" %}</div>
                                    <div class="eenos-modal-info-value" id="deploymentApp"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="eenos-modal-info h-100">
                                <div class="eenos-modal-info-icon">
                                    <i data-lucide="settings-2"></i>
                                </div>
                                <div class="eenos-modal-info-content">
                                    <div class="eenos-modal-info-label">{% translate "Environment" %}</div>
                                    <div class="eenos-modal-info-value text-capitalize"
                                         id="deploymentEnvironment"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="eenos-amber-notice eenos-amber-notice-warning mb-0">
                        <div class="eenos-amber-notice-icon">
                            <i data-lucide="triangle-alert"></i>
                        </div>
                        <div class="eenos-amber-notice-content">
                            <div class="eenos-amber-notice-title">{% translate "Deployment changes the website configuration" %}</div>
                            <div class="eenos-amber-notice-text">{% translate "Eenos will create the isolated environment, install the selected application, and rebuild the web-server configuration. The operation may take several minutes." %}</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary"
                            data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="button" class="btn btn-primary" id="confirmDeployment"><i data-lucide="rocket"></i>{% translate "Start Deployment" %}</button>
                </div>
            </div>
        </div>
    </div>
    {{ domain_docroots|json_script:"ruby-domain-docroots" }}
{% endblock %}
{% block extra_js %}<script>(function($){"use strict";$(function(){const form=$("#deployRubyForm");if(!form.length)return;const modal=bootstrap.Modal.getOrCreateInstance("#deployModal"),roots=JSON.parse(document.getElementById("ruby-domain-docroots").textContent);function updatePublicPrefix(){const domain=$("#deployDomain").val(),root=roots[domain]||"",prefix=domain?"/"+root+"/":"{% translate 'Select website' %} /";$("#publicDirectoryPrefix").html('<i data-lucide="home"></i>&nbsp;'+$("<div>").text(prefix).html());lucide.createIcons()}function syncDemoEnvironment(){const isDemo=$("#demoInstall").val()==="yes",environment=$("#rubyEnvironment");environment.find('option[value="production"]').prop("disabled",isDemo);if(isDemo)environment.val("development").trigger("change")}$("#deployDomain").on("change",updatePublicPrefix);$("#demoInstall").on("change",syncDemoEnvironment);updatePublicPrefix();syncDemoEnvironment();$("#reviewDeployment").on("click",function(){const validation=form.parsley();validation.validate();if(!validation.isValid())return;$("#deploymentDomain").text($("#deployDomain").val());$("#deploymentRuntime").text($("#deployRuby").val());$("#deploymentApp").text("Ruby");$("#deploymentEnvironment").text($("#rubyEnvironment").val());modal.show()});$("#confirmDeployment").on("click",function(){form[0].submit()})})})(jQuery);</script>{% endblock %}