{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "Ruby Gems" %} - Eenos{% endblock %}
{% block content %}
    <div class="eenos-page-header flex-wrap gap-3">
        <div>
            <h1 class="eenos-page-title">{% translate "Ruby Gems" %}</h1>
            <div class="eenos-page-subtitle">{% translate "Choose a Ruby application to manage its installed gems." %}</div>
        </div>
        <a href="{% url 'sandbox_ruby' %}" class="btn btn-outline-primary"><i data-lucide="rocket"></i>{% translate "Deploy Ruby App" %}</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 "Ruby Gems" %}</span>
    </nav>
    {% include "includes/form_alerts.html" %}
    <div class="eenos-card">
        <div class="eenos-card-header">
            <div>
                <h2 class="eenos-card-title">{% translate "Select a Ruby Application" %}</h2>
            </div>
            <div class="eenos-card-action-icon">
                <i data-lucide="gem"></i>
            </div>
        </div>
        <div class="table-responsive">
            <table id="gemDomainsTable" class="table align-middle w-100">
                <thead>
                    <tr>
                        <th>{% translate "Website" %}</th>
                        <th>{% translate "Runtime" %}</th>
                        <th>{% translate "Deployment" %}</th>
                        <th class="text-end">{% translate "Actions" %}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
{% endblock %}
{% block extra_js %}<script>(function($){"use strict";$(function(){const esc=v=>$("<div>").text(v==null?"":v).html();const table=$("#gemDomainsTable").DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'ruby_domains_data' %}",dataSrc:"data"},pageLength:25,lengthMenu:[[25,50,100,-1],[25,50,100,"{% translate 'All' %}"]],order:[[0,"asc"]],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:"{% translate 'Loading...' %}",emptyTable:"{% translate 'No enabled Ruby applications are available.' %}",zeroRecords:"{% translate 'No matching applications found.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[{data:"domain",width:"24%",responsivePriority:1,className:"text-nowrap",render:(v,t,r)=>t==="display"?'<a class="d-inline-flex align-items-center align-middle gap-1 text-decoration-none" href="'+esc(r.site_url)+'" target="_blank" rel="noopener noreferrer"><i data-lucide="external-link"></i><span>'+esc(v)+'</span></a>':v},{data:"ruby_version",render:(v,t,r)=>{if(t!=="display")return r.ruby_version_number||v;const version=esc(r.ruby_version_number||v);if(r.ruby_inherited)return'<div class="d-inline-flex align-items-center gap-2"><span class="badge eenos-badge-neutral font-monospace">'+version+'</span><span class="small text-muted">{% translate "System default" %}</span></div>';return'<div class="d-inline-flex align-items-center gap-2"><span class="badge eenos-badge-primary font-monospace">'+version+'</span><span class="badge eenos-badge-neutral">'+esc(r.ruby_provider||"{% translate 'Eenos' %}")+'</span></div>'}},{data:"deployment_status",render:(v,t)=>t==="display"?'<span class="badge '+(v==="completed"?"eenos-badge-success":"eenos-badge-warning")+'">'+esc(v==="completed"?"{% translate 'Ready' %}":"{% translate 'Deploying' %}")+'</span>':v},{data:null,orderable:false,searchable:false,responsivePriority:1,className:"text-end",render:(d,t,r)=>t!=="display"?"":'<div class="eenos-dt-actions justify-content-end"><a class="btn btn-sm btn-outline-primary '+(r.deployment_in_progress?"disabled":"")+'" href="'+esc(r.manage_gems_url)+'"><i data-lucide="package-open"></i><span>{% translate "Manage Gems" %}</span></a><a class="btn btn-sm btn-outline-secondary" href="'+esc(r.gemfile_url)+'" title="{% translate 'Download Gemfile' %}" aria-label="{% translate 'Download Gemfile' %}"><i data-lucide="download"></i></a></div>'}],drawCallback:()=>lucide.createIcons()});table.on("responsive-display",()=>lucide.createIcons())})})(jQuery);</script>{% endblock %}