{% extends "account/layout.html" %}
{% block title %}{{ super() }} - Functions{% endblock %}
{% block pagetitle %}FUNCTIONS{% endblock %}
{% block content %}
<div class="modal fade" id="functionModal" tabindex="-1" aria-labelledby="functionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ url_for('account.functions') }}" method="post">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-terminal fa-fw text-accent me-2"></i>
                        New Function
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">Project</label>
                        <select name="project_id" class="form-select">
                            <option selected disabled>Select Project</option>
                            {% for project in projects %}
                            <option value="{{ project['_id'] }}">{{ project['name'] | capitalize }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Programming Language</label>
                        <select name="language" class="form-select" required>
                            <option selected disabled>Select Language</option>
                            {% for lang in languages %}
                            <option value="{{ lang }}">{{ lang | capitalize }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Function Name</label>
                        <input type="text" name="name" class="form-control form-control-mono" placeholder="function_name" required>
                        <small class="text-muted">Use snake_case, e.g., add_user, send_email</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="3" placeholder="What does this function do?"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-ghost" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-accent">
                        <i class="fas fa-plus fa-fw me-1"></i>
                        Create Function
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% for (category, message) in get_flashed_messages(request) %}
<div class="alert alert-{{ category }} mb-3">
    <i class="fas fa-{% if category == 'danger' %}exclamation-circle{% elif category == 'success' %}check-circle{% else %}info-circle{% endif %}"></i>
    <span>{{ message }}</span>
    <button type="button" class="btn-close" data-bs-dismiss="alert"><i class="fas fa-times"></i></button>
</div>
{% endfor %}

{% if functions %}
<div class="tools d-flex justify-content-end mb-4">
    <a href="#functionModal" role="button" class="btn btn-accent" data-bs-toggle="modal">
        <i class="fas fa-terminal fa-fw"></i>
        New Function
    </a>
</div>

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Project</th>
                <th>Updated</th>
                <th style="width: 140px;">Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for function in functions %}
            <tr>
                <td>
                    <span class="text-mono">{{ function['name'] }}</span>
                    {% set lang_icon = {'python': 'python', 'javascript': 'js', 'php': 'php', 'bun': 'js'}.get(function['language'] | lower, 'code') %}
                    <span class="badge badge-secondary ms-2">
                        <i class="fab fa-{{ lang_icon }} fa-fw"></i>
                    </span>
                </td>
                <td>{{ function['project']['name'] }}</td>
                <td class="text-mono" style="font-size: 0.8125rem; color: var(--text-tertiary);">
                    {{ function['updated_at'] }}
                </td>
                <td>
                    <div class="d-flex gap-1">
                        <a href="" class="btn btn-ghost btn-sm" title="Edit">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="" class="btn btn-ghost btn-sm text-accent" title="Run">
                            <i class="fas fa-play"></i>
                        </a>
                        <a href="" class="btn btn-ghost btn-sm" title="Code">
                            <i class="fas fa-code"></i>
                        </a>
                        <a href="" class="btn btn-ghost btn-sm text-danger" title="Delete">
                            <i class="fas fa-trash-alt"></i>
                        </a>
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{% else %}
<div class="empty-state fade-in">
    <i class="fas fa-terminal"></i>
    <div class="empty-state-title">No functions yet</div>
    <p class="empty-state-text mb-4">Create your first function to get started</p>
    <a href="#functionModal" class="btn btn-accent" data-bs-toggle="modal">
        <i class="fas fa-plus fa-fw"></i>
        Create Function
    </a>
</div>
{% endif %}
{% endblock %}