{t('Contact admin')}

{t( 'Bug reports, suggestions, channel requests, and account questions.', )}

{t(':count threads', { count: conversations.length, })}

{conversations.map((conversation) => (

{conversation.category_label}

{conversation.subject}

{conversation.latest_message && (

{ conversation.latest_message .author.name } : {conversation.latest_message.body}

)}

{conversation.messages_count}

))} {conversations.length === 0 && (

{t('No conversations yet.')}

)}

{t('New conversation')}

{t('Attach up to 3 files, 200 MB each.')}

form.setData('subject', event.target.value) } maxLength={120} />

form.setData('body', event.target.value)
                                }
                                className="min-h-36 rounded-md border bg-background px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
                                maxLength={2000}
                            />
                        </Field>
                        <Field label="Attachments">
                            <Input
                                ref={fileInputRef}
                                type="file"
                                multiple
                                onChange={(event) =>
                                    setAttachments(event.target.files)
                                }
                            />
                            {form.data.attachments.length > 0 && (
                                <div className="grid gap-1 text-xs text-muted-foreground">
                                    {form.data.attachments.map((file) => (
                                        <span
                                            key={`${file.name}-${file.size}`}
                                            className="flex min-w-0 items-center gap-2"
                                        >
                                            <FileUp className="size-3.5 shrink-0" />
                                            <span className="truncate">
                                                {file.name}
                                            </span>
                                        </span>
                                    ))}
                                </div>
                            )}
                            {form.progress && (
                                <progress
                                    value={form.progress.percentage}
                                    max="100"
                                    className="h-1.5 w-full"
                                />
                            )}
                            <SupportAttachmentErrors errors={form.errors} />
                        </Field>
                        <Button type="submit" disabled={form.processing}>
                            <Send className="size-4" />
                            Send
                        </Button>
                    </form>
                </section>
            </div>
        </>
    );
}

SupportIndex.layout = {
    breadcrumbs: [
        {
            title: 'Contact admin',
            href: supportIndex(),
        },
    ],
};

function StatusBadge({ status }: { status: 'open' | 'closed' }) {
    const { t } = useTranslation();

return (
        <span
            className={cn(
                'rounded-md border px-2 py-0.5 text-xs font-medium',
                status === 'open'
                    ? 'border-success/40 bg-success/10 text-success'
                    : 'text-muted-foreground',
            )}
        >
            {status === 'open' ? t('OPEN') : t('CLOSED')}
        </span>
    );
}