Add advanced options block to cloud remote connection (#19907)

* Add advanced options block to cloud remote connection

* Review

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -1,13 +1,16 @@
-import "@material/mwc-button";
 import { mdiContentCopy, mdiHelpCircle } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
 import "../../../../components/ha-card";
+import "../../../../components/ha-expansion-panel";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 // eslint-disable-next-line
+import { formatDate } from "../../../../common/datetime/format_date";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import {
   CloudStatusLoggedIn,
@@ -125,22 +128,60 @@ export class CloudRemotePref extends LitElement {
           >.
           <ha-svg-icon
             .url=${`https://${remote_domain}`}
-            .path=${mdiContentCopy}
             @click=${this._copyURL}
+            .path=${mdiContentCopy}
           ></ha-svg-icon>
-          <ha-formfield .label=${"Allow external activation"}>
-            <ha-switch
-              .checked=${remote_allow_remote_enable}
-              @change=${this._toggleAllowRemoteEnabledChanged}
-            ></ha-switch>
-          </ha-formfield>
-        </div>
-        <div class="card-actions">
-          <mwc-button @click=${this._openCertInfo}>
-            ${this.hass.localize(
-              "ui.panel.config.cloud.account.remote.certificate_info"
+          <ha-expansion-panel
+            outlined
+            .header=${this.hass.localize(
+              "ui.panel.config.cloud.account.remote.advanced_options"
             )}
-          </mwc-button>
+          >
+            <ha-settings-row>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.external_activation"
+                )}</span
+              >
+              <span slot="description"
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.external_activation_secondary"
+                )}</span
+              >
+              <ha-switch
+                .checked=${remote_allow_remote_enable}
+                @change=${this._toggleAllowRemoteEnabledChanged}
+              ></ha-switch>
+            </ha-settings-row>
+            <ha-settings-row>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.certificate_info"
+                )}</span
+              >
+              <span slot="description"
+                >${this.cloudStatus!.remote_certificate
+                  ? this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.certificate_expire",
+                      {
+                        date: formatDate(
+                          new Date(
+                            this.cloudStatus.remote_certificate.expire_date
+                          ),
+                          this.hass.locale,
+                          this.hass.config
+                        ),
+                      }
+                    )
+                  : nothing}</span
+              >
+              <ha-button @click=${this._openCertInfo}>
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.more_info"
+                )}
+              </ha-button>
+            </ha-settings-row>
+          </ha-expansion-panel>
         </div>
       </ha-card>
     `;
@@ -243,6 +284,9 @@ export class CloudRemotePref extends LitElement {
       ha-formfield {
         margin-top: 8px;
       }
+      ha-expansion-panel {
+        margin-top: 8px;
+      }
     `;
   }
 }

src/translations/en.json

@@ -3508,7 +3508,12 @@
               "instance_will_be_available": "Your instance will be available at your",
               "link_learn_how_it_works": "Learn how it works",
               "nabu_casa_url": "Nabu Casa URL",
-              "certificate_info": "Certificate info"
+              "advanced_options": "Advanced options",
+              "external_activation": "Allow external activation of remote control",
+              "external_activation_secondary": "Allows you to turn on remote control from your Nabu Casa account page, even if you're outside your local network",
+              "certificate_info": "Certificate info",
+              "certificate_expire": "Will be renewed at {date}",
+              "more_info": "More info"
             },
             "alexa": {
               "title": "Alexa",