{{template "layout.html" .}}

{{define "content"}}
<div class="card">
    <div class="card-body">
        <h5 class="mb-3">{{if .Data.IsNew}}{{T "user_create_project"}}{{else}}{{T "user_edit_project"}}{{end}}</h5>
        <form id="projectForm">
            <input type="hidden" id="projectId" value="{{if .Data.Project}}{{index .Data.Project "id"}}{{else}}0{{end}}">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">{{T "user_project_name"}} *</label>
                    <input type="text" class="form-control" id="projectName" value="{{if .Data.Project}}{{index .Data.Project "name"}}{{end}}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{T "user_project_slug"}} *</label>
                    <input type="text" class="form-control" id="projectSlug" value="{{if .Data.Project}}{{index .Data.Project "slug"}}{{end}}" placeholder="{{T "user_project_slug_placeholder"}}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{T "user_project_directory"}}</label>
                    <select class="form-select" id="projectDirectory">
                        {{range .Data.Directories}}
                        <option value="{{.value}}" {{if $.Data.Project}}{{if eq (index $.Data.Project "directory") .value}}selected{{end}}{{end}}>{{.label}}</option>
                        {{end}}
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">{{T "user_access_mode"}}</label>
                    <select class="form-select" id="projectAccess">
                        <option value="public" {{if .Data.Project}}{{if eq (index .Data.Project "access_mode") "public"}}selected{{end}}{{else}}selected{{end}}>{{T "user_access_public"}}</option>
                        <option value="private" {{if .Data.Project}}{{if eq (index .Data.Project "access_mode") "private"}}selected{{end}}{{end}}>{{T "user_access_private"}}</option>
                        <option value="login" {{if .Data.Project}}{{if eq (index .Data.Project "access_mode") "login"}}selected{{end}}{{end}}>{{T "user_access_login"}}</option>
                    </select>
                </div>
                <div class="col-12">
                    <label class="form-label">{{T "user_project_description"}}</label>
                    <textarea class="form-control" id="projectDesc" rows="3">{{if .Data.Project}}{{index .Data.Project "description"}}{{end}}</textarea>
                </div>
            </div>
            <div class="d-flex gap-2 mt-3">
                <button type="submit" class="btn btn-primary">{{T "user_btn_save"}}</button>
                <a href="/user/projects" class="btn btn-outline-secondary">{{T "user_btn_cancel"}}</a>
            </div>
        </form>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
$('#projectForm').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url: '/user/project_save',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            id: parseInt($('#projectId').val()) || 0,
            name: $('#projectName').val(),
            slug: $('#projectSlug').val(),
            description: $('#projectDesc').val(),
            directory: $('#projectDirectory').val(),
            access_mode: $('#projectAccess').val()
        }),
        success: function(res) {
            if (res.success) {
                BootstrapModal.msg(res.message, {icon: 1}, function() {
                    location.href = '/user/projects';
                });
            } else {
                BootstrapModal.msg(res.message || {{json (T "user_save_failed")}}, {icon: 2});
            }
        }
    });
});
</script>
{{end}}