{{define "form_service"}}
<form action="{{if ne .Id 0}}/service/{{.Id}}{{else}}/services{{end}}" method="POST">
    <div class="form-group row">
        <label for="service_name" class="col-sm-4 col-form-label">Service Name</label>
        <div class="col-sm-8">
            <input type="text" name="name" class="form-control" id="service_name" value="{{.Name}}" placeholder="Name" required spellcheck="false">
            <small class="form-text text-muted">Give your service a name you can recognize</small>
        </div>
    </div>
    <div class="form-group row">
        <label for="service_type" class="col-sm-4 col-form-label">Service Type</label>
        <div class="col-sm-8">
            <select name="check_type" class="form-control" id="service_type" value="{{.Type}}" {{if ne .Type ""}}readonly{{end}}>
                <option value="http" {{if eq .Type "http"}}selected{{end}}>HTTP Service</option>
                <option value="tcp" {{if eq .Type "tcp"}}selected{{end}}>TCP Service</option>
                <option value="udp" {{if eq .Type "udp"}}selected{{end}}>UDP Service</option>
            </select>
            <small class="form-text text-muted">Use HTTP if you are checking a website or use TCP if you are checking a server</small>
        </div>
    </div>
    <div class="form-group row">
        <label for="service_url" class="col-sm-4 col-form-label">{{if (eq .Type "tcp") or (eq .Type "udp")}}Host/IP Address{{else}}Application Endpoint (URL){{end}}</label>
        <div class="col-sm-8">
            <input type="text" name="domain" class="form-control" id="service_url" value="{{.Domain}}" placeholder="https://google.com" required autocapitalize="false" spellcheck="false">
            <small class="form-text text-muted">Statup will attempt to connect to this URL</small>
        </div>
    </div>
    <div class="form-group row{{if (eq .Type "tcp") or (eq .Type "udp")}} d-none{{end}}">
        <label for="service_check_type" class="col-sm-4 col-form-label">Service Check Type</label>
        <div class="col-sm-8">
            <select name="method" class="form-control" id="service_check_type" value="{{.Method}}">
                <option value="GET" {{if eq .Method "GET"}}selected{{end}}>GET</option>
                <option value="POST" {{if eq .Method "POST"}}selected{{end}}>POST</option>
                <option value="DELETE" {{if eq .Method "DELETE"}}selected{{end}}>DELETE</option>
                <option value="PATCH" {{if eq .Method "PATCH"}}selected{{end}}>PATCH</option>
                <option value="PUT" {{if eq .Method "PUT"}}selected{{end}}>PUT</option>
            </select>
            <small class="form-text text-muted">A GET request will simply request the endpoint, you can also send data with POST.</small>
        </div>
    </div>
    <div class="form-group row{{if ne .Method "POST"}} d-none{{end}}">
        <label for="post_data" class="col-sm-4 col-form-label">Optional Post Data (JSON)</label>
        <div class="col-sm-8">
            <textarea name="post_data" class="form-control" id="post_data" rows="3" autocapitalize="false" spellcheck="false" placeholder='{"data": { "method": "success", "id": 148923 } }'>{{.PostData.String}}</textarea>
            <small class="form-text text-muted">Insert a JSON string to send data to the endpoint.</small>
        </div>
    </div>
    <div class="form-group row{{if (eq .Type "tcp") or (eq .Type "udp")}} d-none{{end}}">
        <label for="service_response" class="col-sm-4 col-form-label">Expected Response (Regex)</label>
        <div class="col-sm-8">
            <textarea name="expected" class="form-control" id="service_response" rows="3" autocapitalize="false" spellcheck="false" placeholder='(method)": "((\\"|[success])*)"'>{{.Expected.String}}</textarea>
            <small class="form-text text-muted">You can use plain text or insert <a target="_blank" href="https://regex101.com/r/I5bbj9/1">Regex</a> to validate the response</small>
        </div>
    </div>
    <div class="form-group row{{if (eq .Type "tcp") or (eq .Type "udp")}} d-none{{end}}">
        <label for="service_response_code" class="col-sm-4 col-form-label">Expected Status Code</label>
        <div class="col-sm-8">
            <input type="number" name="expected_status" class="form-control" value="{{if ne .ExpectedStatus 0}}{{.ExpectedStatus}}{{end}}" placeholder="200" id="service_response_code">
            <small class="form-text text-muted">A status code of 200 is success, or view all the <a target="_blank" href="https://www.restapitutorial.com/httpstatuscodes.html">HTTP Status Codes</a></small>
        </div>
    </div>
    <div class="form-group row{{if (ne .Type "tcp") and (ne .Type "udp")}} d-none{{end}}">
        <label for="port" class="col-sm-4 col-form-label">TCP Port</label>
        <div class="col-sm-8">
            <input type="number" name="port" class="form-control" value="{{if ne .Port 0}}{{.Port}}{{end}}" id="service_port" placeholder="8080">
        </div>
    </div>
    <div class="form-group row">
        <label for="interval" class="col-sm-4 col-form-label">Check Interval (Seconds)</label>
        <div class="col-sm-8">
            <input type="number" name="interval" class="form-control" value="{{if ne .Interval 0}}{{.Interval}}{{else}}60{{end}}" min="1" id="service_interval" required>
            <small id="interval" class="form-text text-muted">10,000+ will be checked in Microseconds (1 millisecond = 1000 microseconds).</small>
        </div>
    </div>
    <div class="form-group row">
        <label for="service_timeout" class="col-sm-4 col-form-label">Timeout in Seconds</label>
        <div class="col-sm-8">
            <input type="number" name="timeout" class="form-control" value="{{if ne .Timeout 0}}{{.Timeout}}{{else}}15{{end}}" placeholder="15" id="service_timeout" min="1">
            <small class="form-text text-muted">If the endpoint does not respond within this time it will be considered to be offline</small>
        </div>
    </div>
    <div class="form-group row d-none">
        <label for="order" class="col-sm-4 col-form-label">List Order</label>
        <div class="col-sm-8">
            <input type="number" name="order" class="form-control" min="0" value="{{.Order}}" id="order">
            <small class="form-text text-muted">You can also drag and drop services to reorder on the Services tab.</small>
        </div>
    </div>
    <div class="form-group row">
        <div class="{{if ne .Id 0}}col-6{{else}}col-12{{end}}">
            <button type="submit" class="btn btn-success btn-block">{{if ne .Id 0}}Update Service{{else}}Create Service{{end}}</button>
        </div>
        {{if ne .Id 0}}
        <div class="col-6">
            <a href="/service/{{ .Id }}/delete_failures" class="btn btn-danger btn-block confirm-btn">Delete All Failures</a>
        </div>
        {{end}}
    </div>
</form>
{{end}}