@php $mod = $module ?? null; @endphp

{{-- Git Fields (Improved UI) --}}
<div class="gx-git-wrap">

    {{-- Repository URL --}}
    <div class="gx-field">
        <label class="gx-label">
            Repository URL <span class="gx-req">*</span>
        </label>

        <div class="gx-input-wrap">
            <span class="gx-ico" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                </svg>
            </span>

            <input type="text"
                   name="git_url"
                   class="form-control gx-input gx-mono @error('git_url') is-invalid @enderror"
                   value="{{ old('git_url', $mod?->git_url) }}"
                   placeholder="git@github.com:organization/repository.git"
                   >
        </div>

        @error('git_url') <div class="invalid-feedback">{{ $message }}</div> @enderror

        <div class="gx-help">
            SSH format: <span class="gx-mono">git@domain:group/repo.git</span>
        </div>
    </div>

    {{-- Branch + Author Name --}}
    <div class="gx-grid2">
        <div class="gx-field">
            <label class="gx-label">Branch</label>

            <div class="gx-input-wrap">
                <span class="gx-ico" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                    </svg>
                </span>

                <input type="text"
                       name="git_branch"
                       class="form-control gx-input @error('git_branch') is-invalid @enderror"
                       value="{{ old('git_branch', $mod?->git_branch ?? 'master') }}"
                       placeholder="master">
            </div>

            @error('git_branch') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>

        <div class="gx-field">
            <label class="gx-label">
                Author Name <span class="gx-req">*</span>
            </label>

            <div class="gx-input-wrap">
                <span class="gx-ico" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                </span>

                <input type="text"
                       name="git_user_name"
                       class="form-control gx-input @error('git_user_name') is-invalid @enderror"
                       value="{{ old('git_user_name', $mod?->git_user_name) }}"
                       placeholder="John Doe"
                       >
            </div>

            @error('git_user_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
    </div>

    {{-- Author Email --}}
    <div class="gx-field">
        <label class="gx-label">
            Author Email <span class="gx-req">*</span>
        </label>

        <div class="gx-input-wrap">
            <span class="gx-ico" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
            </span>

            <input type="email"
                   name="git_user_email"
                   class="form-control gx-input @error('git_user_email') is-invalid @enderror"
                   value="{{ old('git_user_email', $mod?->git_user_email) }}"
                   placeholder="john@example.com"
                   >
        </div>

        @error('git_user_email') <div class="invalid-feedback">{{ $message }}</div> @enderror
    </div>

    {{-- Note --}}
    <div class="gx-note">
        <span class="gx-note-ico" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </span>
        <div>
            Make sure the server’s SSH public key is added to the repository deploy keys.
        </div>
    </div>

</div>

<style>
/* ===== Git Fields (Upload panel) UI ===== */
.gx-git-wrap{
    display:flex;
    flex-direction:column;
    gap: 14px;
}

.gx-field{ display:flex; flex-direction:column; gap: 6px; }

.gx-label{
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.gx-req{ color: var(--danger); font-weight: 800; }

.gx-input-wrap{ position:relative; }

.gx-ico{
    position:absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--text-muted);
    pointer-events:none;
    opacity: .9;
}
.gx-ico svg{ width: 16px; height: 16px; }

.gx-input{
    padding-left: 38px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    background: var(--card-bg, #fff);
}

/* monospace for url */
.gx-mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* small helper line */
.gx-help{
    font-size: 11px;
    color: var(--text-muted);
}

/* two columns responsive */
.gx-grid2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 520px){
    .gx-grid2{ grid-template-columns: 1fr; }
}

/* note box */
.gx-note{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    background: var(--body-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}
.gx-note-ico{
    width: 18px;
    height: 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--warning);
    flex-shrink: 0;
    margin-top: 1px;
}
.gx-note-ico svg{ width: 18px; height: 18px; }

/* nicer focus ring */
.gx-git-wrap .form-control:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), .12);
}
</style>