<html><head></head><body><dom-module id="ha-panel-dev-template"><template><style is="custom-style" include="ha-style iron-flex iron-positioning"></style><style>:host{-ms-user-select:initial;-webkit-user-select:initial;-moz-user-select:initial;}.content{padding:16px;}.edit-pane{margin-right:16px;}.edit-pane a{color:var(--dark-primary-color);}.horizontal .edit-pane{max-width:50%;}.render-pane{position:relative;max-width:50%;}.render-spinner{position:absolute;top:8px;right:8px;}paper-textarea{--paper-input-container-input:{@apply --paper-font-code1;};}.rendered{@apply --paper-font-code1;clear:both;white-space:pre-wrap;}.rendered.error{color:red;}</style><app-header-layout has-scrolling-region=""><app-header slot="header" fixed=""><app-toolbar><ha-menu-button narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button><div main-title="">Templates</div></app-toolbar></app-header><div class$="[[computeFormClasses(narrow)]]"><div class="edit-pane"><p>Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.</p><ul><li><a href="http://jinja.pocoo.org/docs/dev/templates/" target="_blank">Jinja2 template documentation</a></li><li><a href="https://home-assistant.io/docs/configuration/templating/" target="_blank">Home Assistant template extensions</a></li></ul><paper-textarea label="Template editor" value="{{template}}" autofocus=""></paper-textarea></div><div class="render-pane"><paper-spinner class="render-spinner" active="[[rendering]]"></paper-spinner><pre class$="[[computeRenderedClasses(error)]]">[[processed]]</pre></div></div></app-header-layout></template></dom-module><script>class HaPanelDevTemplate extends Polymer.Element{static get is(){return"ha-panel-dev-template"}static get properties(){return{hass:{type:Object},narrow:{type:Boolean,value:!1},showMenu:{type:Boolean,value:!1},error:{type:Boolean,value:!1},rendering:{type:Boolean,value:!1},template:{type:String,value:'Imitate available variables:\n{% set my_test_json = {\n  "temperature": 25,\n  "unit": "°C"\n} %}\n\nThe temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}.\n\n{% if is_state("device_tracker.paulus", "home") and\n      is_state("device_tracker.anne_therese", "home") -%}\n  You are both home, you silly\n{%- else -%}\n  Anne Therese is at {{ states("device_tracker.anne_therese") }}\n  Paulus is at {{ states("device_tracker.paulus") }}\n{%- endif %}\n\nFor loop example:\n{% for state in states.sensor -%}\n  {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}\n  {{ state.name | lower }} is {{state.state_with_unit}}\n{%- endfor %}.',observer:"templateChanged"},processed:{type:String,value:""}}}computeFormClasses(e){return e?"content fit":"content fit layout horizontal"}computeRenderedClasses(e){return e?"error rendered":"rendered"}templateChanged(){this.error&&(this.error=!1),this._debouncer=Polymer.Debouncer.debounce(this._debouncer,Polymer.Async.timeOut.after(500),()=>{this.renderTemplate()})}renderTemplate(){this.rendering=!0,this.hass.callApi("POST","template",{template:this.template}).then(function(e){this.processed=e,this.rendering=!1}.bind(this),function(e){this.processed=e.body.message,this.error=!0,this.rendering=!1}.bind(this))}}customElements.define(HaPanelDevTemplate.is,HaPanelDevTemplate);</script></body></html>