<div class="title-text">
    <h1>Connect To Company</h1>
</div>
<form (ngSubmit)="PostNewCompany(newListing)">
    <!-- Company Name -->
    <div #step class="sub-frame">
        <div class="center">
            <div class="content-frame">
                <label>Company Name</label>
                <input class="input-field" name="name" [(ngModel)]="newListing.name" type="text" placeholder="Mistox" />
                <button type="button" (click)="nextStep()">Next</button>
            </div>
            <div class="footer-frame">
                <span>Company Name</span><br />
                <span>Cannot be changed later</span>
            </div>
        </div>
    </div>

    <!-- Company URL -->
    <div #step class="sub-frame">
        <div class="center">
            <div class="content-frame">
                <label>Company Website URL</label>
                <input class="input-field" name="url" [(ngModel)]="newListing.websiteURL" type="text" (blur)="validateURL(newListing.websiteURL)" placeholder="https://mistox.com/" />
                <button type="button" (click)="prevStep()">Back</button>
                <button type="button" (click)="nextStep()">Next</button>
            </div>
            <div class="footer-frame">
                <span>Link to your company URL</span><br />
            </div>
        </div>
    </div>

    <!-- Company LOGO URL -->
    <div #step class="sub-frame">
        <div class="center">
            <div class="content-frame">
                <label>Company Logo URL</label>

                <img [src]="newListing.logo" />
                <!-- Need to fix for image file upload -->
                <div id="FileUploadPlaceholder" ></div>
                <input name="file" type="file" (change)="onFileSelected($event)" accept="image/*" />

                <button type="button" (click)="prevStep()">Back</button>
                <button type="button" (click)="nextStep()">Next</button>
            </div>
            <div class="footer-frame">
                <span>Link to your company Logo</span><br />
                <span>This will show on all your job listings</span><br />
            </div>
        </div>
    </div>

    <!-- Contact -->
    <div #step class="sub-frame">
        <div class="center">
            <div class="content-frame">
                <div class="split">
                    <div class="half-frame">
                        <label>Company Email</label>
                        <input class="input-field" name="email" [(ngModel)]="newListing.email" type="text" (ngModelChange)="validateEmail(newListing.email)" placeholder="Questions@mistox.com" />
                    </div>
                    <div class="half-frame">
                        <label>Company Phone Number</label>
                        <input class="input-field" name="phone" [(ngModel)]="newListing.phone" type="tel" (ngModelChange)="validatePhone(newListing.phone)" placeholder="+1 800-000-0000" />
                    </div>
                </div>
                <button type="button" (click)="prevStep()">Back</button>
                <button type="button" (click)="nextStep()">Next</button>
            </div>
            <div class="footer-frame">
                <span>How clients can get in contact with you about the open job listings</span><br />
            </div>
        </div>
    </div>

    <!-- Location -->
    <div #step class="sub-frame">
        <div class="center">
            <div class="content-frame">
                <div class="split">
                    <div class="half-frame">
                        <label>City</label>
                        <input class="input-field" name="city" [(ngModel)]="newListing.city" type="text" placeholder="San Diego" />
                    </div>
                    <div class="half-frame">
                        <label>2 Letter Country</label>
                        <input class="input-field" name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" placeholder="US" />
                    </div>
                    <div class="half-frame">
                        <label>2 Letter State/Region</label>
                        <input class="input-field" name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" placeholder="CA" />
                    </div>
                    <div class="half-frame">
                        <label>Postal Code</label>
                        <input class="input-field" name="postalCode" [(ngModel)]="newListing.postalCode" type="text" placeholder="92020" />
                    </div>
                </div>
                <button type="button" (click)="prevStep()">Back</button>
                <button type="button" (click)="nextStep()">Next</button>
            </div>
            <div class="footer-frame">
                <span>The location of your company office or hq</span><br />
            </div>
        </div>
    </div>

    <!-- Description -->
    <div #step class="sub-frame">
        <div class="center">
            <div class="content-frame">
                <label>Description</label>
                <textarea class="input-field" name="description" [(ngModel)]="newListing.description" type="text"></textarea>
                <button type="button" (click)="prevStep()">Back</button>
                <button type="button" (click)="nextStep()">Next</button>
            </div>
            <div class="footer-frame">
                <span>Describe your buisiness so that people applying can understand the core values and culture</span><br />
            </div>
        </div>
    </div>

    <!-- Submit -->
    <div #step class="sub-frame">
        <div class="center">
            <div class="content-frame">
                <a [href]="newListing.websiteURL">{{ newListing.name }}</a>
                <div class="split">
                    <a href="mailto:{{ newListing.email }}">{{ newListing.email }}</a>
                    <a href="tel:{{ newListing.phone }}">{{ newListing.phone }}</a>
                </div>
                <div><img [src]="newListing.logo" /></div>
                <div class="split">
                    <div class="half-frame">
                        <span>city: {{ newListing.city }}</span>
                    </div>
                    <div class="half-frame">
                        <span>country: {{ newListing.country }}</span>
                    </div>
                </div>
                <div class="split">
                    <div class="half-frame">
                        <span>state: {{ newListing.stateOrRegion }}</span>
                    </div>
                    <div class="half-frame">
                        <span>postal code: {{ newListing.postalCode }}</span>
                    </div>
                </div>
                @for(descLine of newListing.description.split('\n'); track descLine.length){
                    <div>
                        <span>{{ descLine }}</span><br />
                    </div>
                }
            </div>
            <div class="content-frame">
                <button type="button" (click)="prevStep()">Back</button>
                @if(isNewCompany){
                    <button type="submit">CREATE COMPANY</button>
                }@else{
                    <button type="submit">UPDATE COMPANY</button>
                }
            </div>
            <div class="footer-frame">
                <span>Does everything look good</span><br />
            </div>
        </div>
    </div>
</form>

@if (ErrorMsg != ""){
    <div class="error-window">
        <h1>{{ ErrorMsg }}</h1>
    </div>
}