<section class="contact-standalone">
    <section class="dashboard-page-header">
        <div>
            <h1 class="dashboard-page-title">{lang key='contactus'}</h1>
            <p class="dashboard-page-subtitle">{$brandTagline|default:'Cloud Hosting Platform'}</p>
        </div>
        <div class="dashboard-page-breadcrumb">
            {include file="$template/includes/breadcrumb.tpl"}
        </div>
    </section>

    <section class="contact-standalone__hero dashboard-panel">
        <div class="contact-standalone__hero-main">
            <div>
                <span class="auth-shell__eyebrow">{$brandName|default:'Nebulix'}</span>
                <h2 class="contact-standalone__title">{lang key='contactus'}</h2>
                <p class="contact-standalone__copy">{lang key='contactheader'}</p>
            </div>
            <div class="contact-standalone__hero-actions">
                {if $loggedin}
                    <a href="{$WEB_ROOT}/clientarea.php" class="btn btn-brand">
                        <i class="fas fa-home"></i>
                        <span>{lang key='clientareatitle'}</span>
                    </a>
                {else}
                    <a href="{$WEB_ROOT}/index.php?rp=/login" class="btn btn-default">
                        <i class="fas fa-sign-in-alt"></i>
                        <span>{lang key='login'}</span>
                    </a>
                    <a href="{$WEB_ROOT}/register.php" class="btn btn-brand">
                        <i class="fas fa-user-plus"></i>
                        <span>{lang key='userLogin.createAccount'}</span>
                    </a>
                {/if}
            </div>
        </div>
    </section>

    <div class="contact-standalone__layout">
        <aside class="auth-shell__intro dashboard-panel">

            <h2 class="auth-shell__title">{lang key='contactus'}</h2>
            <p class="auth-shell__copy">{lang key='contactheader'}</p>

            <div class="auth-shell__hero-art" aria-hidden="true">
                <span class="auth-shell__hero-orbit auth-shell__hero-orbit--one"></span>
                <span class="auth-shell__hero-orbit auth-shell__hero-orbit--two"></span>
                <span class="auth-shell__hero-node auth-shell__hero-node--one"></span>
                <span class="auth-shell__hero-node auth-shell__hero-node--two"></span>
                <span class="auth-shell__hero-node auth-shell__hero-node--three"></span>
                <span class="auth-shell__hero-cloud"><i class="fas fa-envelope"></i></span>
                <span class="auth-shell__hero-server auth-shell__hero-server--one"><i class="fas fa-comments"></i></span>
                <span class="auth-shell__hero-server auth-shell__hero-server--two"><i class="fas fa-life-ring"></i></span>
                <span class="auth-shell__hero-shield"><i class="fas fa-headset"></i></span>
            </div>

            <div class="auth-shell__features auth-shell__features--stacked">
                <div class="auth-shell__feature">
                    <span class="auth-shell__feature-icon"><i class="fas fa-reply"></i></span>
                    <div>
                        <strong>{lang key='supportticketspagetitle'}</strong>
                        <p>{lang key='supportticketssystemdescription'}</p>
                    </div>
                </div>
                <div class="auth-shell__feature">
                    <span class="auth-shell__feature-icon"><i class="fas fa-book-open"></i></span>
                    <div>
                        <strong>{lang key='knowledgebasetitle'}</strong>
                        <p>{lang key='knowledgebasedescription'}</p>
                    </div>
                </div>
                <div class="auth-shell__feature">
                    <span class="auth-shell__feature-icon"><i class="fas fa-paper-plane"></i></span>
                    <div>
                        <strong>{lang key='contactsend'}</strong>
                        <p>{lang key='contactmessage'}</p>
                    </div>
                </div>
            </div>
        </aside>

        <div class="dashboard-panel contact-standalone__form-panel">
            <div class="contact-standalone__form-header">
                <div class="contact-standalone__form-icon"><i class="fas fa-envelope-open-text"></i></div>
                <div>
                    <h2>{lang key='contactus'}</h2>
                    <p>{lang key='contactheader'}</p>
                </div>
            </div>

            {if $sent}
                {include file="$template/includes/alert.tpl" type="success" msg="{lang key='contactsent'}" textcenter=true}
            {/if}

            {if $errormessage}
                {include file="$template/includes/alert.tpl" type="error" errorshtml=$errormessage}
            {/if}

            {if !$sent}
                <form method="post" action="contact.php" role="form" class="contact-standalone__form">
                    <input type="hidden" name="action" value="send" />

                    <div class="contact-standalone__grid">
                        <div class="form-group">
                            <label for="inputName">{lang key='supportticketsclientname'}</label>
                            <input type="text" name="name" value="{$name}" class="form-control" id="inputName" />
                        </div>
                        <div class="form-group">
                            <label for="inputEmail">{lang key='supportticketsclientemail'}</label>
                            <input type="email" name="email" value="{$email}" class="form-control" id="inputEmail" />
                        </div>
                        <div class="form-group contact-standalone__field--full">
                            <label for="inputSubject">{lang key='supportticketsticketsubject'}</label>
                            <input type="text" name="subject" value="{$subject}" class="form-control" id="inputSubject" />
                        </div>
                        <div class="form-group contact-standalone__field--full">
                            <label for="inputMessage">{lang key='contactmessage'}</label>
                            <textarea name="message" rows="8" class="form-control" id="inputMessage">{$message}</textarea>
                        </div>
                    </div>

                    {if $captcha}
                        <div class="text-center margin-bottom">
                            {include file="$template/includes/captcha.tpl"}
                        </div>
                    {/if}

                    <div class="contact-standalone__form-actions">
                        <button type="submit" class="btn btn-primary{$captcha->getButtonClass($captchaForm)}">{lang key='contactsend'}</button>
                    </div>
                </form>
            {/if}
        </div>
    </div>
</section>
