{{ define "content" }}
<div class="row flex-container">
  <div class="col-xs-12 col-md-6 flex-item">
    <div class="card">
      <h3 class="card-header">My Contact Info</h3>
      <div class="card-block">
        <form method="POST" action="/settings">
          <input type="hidden" name="type" value="contactUpdate" />
          <div class="form-group row">
            <label for="phone-1" class="col-sm-12 col-md-5 col-form-label">Primary Home Phone Number</label>
            <div class="col-sm-12 col-md-7">
              <input type="tel" pattern='[\d\(\)\- ]{9,}' id="phone-1" name="phone-1" placeholder="{{ template "phoneFmtStr" . }}" value="{{ $.PageItems.Phone1 }}">
            </div>
          </div>
          <div class="form-group row">
            <label for="phone-2" class="col-sm-12 col-md-5">Secondary Home Phone Number</label>
            <div class="col-sm-12 col-md-7">
              <input type="tel" pattern='[\d\(\)\- ]{9,}' id="phone-2" name="phone-2" placeholder="{{ template "phoneFmtStr" . }}" value="{{ $.PageItems.Phone2 }}">
            </div>
          </div>
          <div class="form-group row">
            <label for="sms-1" class="col-sm-12 col-md-5 col-form-label">Primary Cell Phone Number</label>
            <div class="col-sm-12 col-md-7">
              <input type="tel" pattern='[\d\(\)\- ]{9,}' id="sms-1" name="sms-1" placeholder="{{ template "phoneFmtStr" . }}" value="{{ $.PageItems.SMS1 }}">
            </div>
          </div>
          <div class="form-group row">
            <label for="sms-2" class="col-sm-12 col-md-5">Secondary Cell Phone Number</label>
            <div class="col-sm-12 col-md-7">
              <input type="tel" pattern='[\d\(\)\- ]{9,}' id="sms-2" name="sms-2" placeholder="{{ template "phoneFmtStr" . }}" value="{{ $.PageItems.SMS2 }}">
            </div>
          </div>
          <div class="form-group row">
            <label for="email-1" class="col-sm-12 col-md-5 col-form-label">Primary Email Address</label>
            <div class="col-sm-12 col-md-7">
              <input type="email" id="email-1" name="email-1" placeholder="name@example.com" value="{{ $.PageItems.Email1 }}">
            </div>
          </div>
          <div class="form-group row">
            <label for="email-2" class="col-sm-12 col-md-5 col-form-label">Secondary Email Address</label>
            <div class="col-sm-12 col-md-7">
              <input type="email" id="email-2" name="email-2" placeholder="name@examle.com" value="{{ $.PageItems.Email2 }}">
            </div>
          </div>
          <button type="submit" class="btn btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Update</button>
        </form>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-6 flex-item">
    <div class="card">
      <h3 class="card-header">{{ block "AccountInfo" . }}Account Info{{ end }}</h3>
      <div class="card-block">
        <address>
          <h5>{{ $.PageItems.Name }}</h5>

          {{ with .PageItems.Account }}
          <strong>{{ block "JuiceAccount" . }}Account{{ end }} #: {{ $.PageItems.Account }}</strong><br />
          {{ end }}

          {{ block "CustomAccount" . }}
          {{ with .PageItems.Contract }}
            <strong>Contract #:</strong> {{ $.PageItems.Contract }}<br />
          {{ end }}

          {{ with .PageItems.LocName }}
            <strong>Location Name:</strong> {{ $.PageItems.LocName }}<br />
          {{ end }}
          {{ end }}

          <br /><br />
          <h5>Your Meters</h5>
          Meter #: {{ $.PageItems.SerialNumber }}
        </address>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-6 flex-item">
    <div class="card">
      <h3 class="card-header">Billing Info</h3>
      <div class="card-block">
        <form method="POST" action="/settings">
          <input type="hidden" name="type" value="billingUpdate" />
          <div class="form-group">
            <label for="notifydays">Low Balance Notification</label>
            <select id="notifydays" name="notifydays" class="form-control">
              <optgroup label="Current">
                <option value="{{ $.PageItems.NotifyDays }}">{{ $.PageItems.NotifyDays }} days</option>
              </optgroup>
              <optgroup label="Available">
                <option value="0">0 days</option>
                <option value="1">1 days</option>
                <option value="2">2 days</option>
                <option value="3">3 days</option>
              </optgroup>
            </select>
          </div>
          <div class="form-group">
            <label >Send notifications to: </label>
            <label class="form-check-inline">
              <input class="form-check-input" type="checkbox" id="notifyEmail" name="notifyEmail" value="email" {{ if .PageItems.EmailNotify }}checked{{ end }}> Email
            </label>
            <label class="form-check-inline">
              <input class="form-check-input" type="checkbox" id="notifyText" name="notifyText" value="sms" {{ if .PageItems.SMSNotify }}checked{{ end }}> SMS
            </label>
          </div>
          <button type="submit" class="btn btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Update</button>
        </form>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-6 flex-item">
    <div class="card">
      <h3 class="card-header">Change Password</h3>
      <div class="card-block">
        <form method="POST" action="/settings">
          <input type="hidden" name="type" value="passwdUpdate" />
          <div class="form-group row">
            <label for="newPasswd" class="col-sm-12 col-md-5 col-form-label">New Password</label>
            <div class="col-sm-12 col-md-7">
              <input type="password" id="newPasswd" name="newPasswd" minlength=7 />
            </div>
          </div>
          <div class="form-group row">
            <label for="confirmPasswd" class="col-sm-12 col-md-5 col-form-label">Confirm New Password</label>
            <div class="col-sm-12 col-md-7">
              <input type="password" id="confirmPasswd" name="confirmPasswd" minlength=7 />
            </div>
          </div>
          <button type="submit" class="btn btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Update</button>
        </form>
      </div>
    </div>
  </div>
</div>
{{ end }}
