Low Code Ep 6 - Adding Tabs

gistfile1.html

{% block body %}
 <sp-tabs>
    <sp-tab slot="tabs" name="details">Details</sp-tab> 
    <sp-tab slot="tabs" name="aircraft-parts">Aircraft Parts</sp-tab>
    <sp-tab slot="tabs" name="fleet-assignments">Fleet Assignments</sp-tab>

    <sp-tab-panel name="details" shown>
      <sp-responsive-columns>
      <div>
        <sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Description</sp-heading>
     <sp-record-row>
    <span slot="label">Hyperspace</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="Hyperspace"></platform-component> 
  </sp-record-row>   
  <sp-record-row>
    <span slot="label"># of Seats</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="Seats"></platform-component> 
  </sp-record-row>
     <sp-record-row>
    <span slot="label">Release Date</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="ReleaseDate"></platform-component> 
  </sp-record-row>  
  <sp-record-row>
    <span slot="label">Last Service Date</span>
    <platform-component package-name="recordpage" name="RecordFieldView" field-name="LastService"></platform-component> 
  </sp-record-row>    
    </div>
  <div>
     <sp-record-row>
     <span slot="label">Branding</span>
        <platform-component package-name="recordpage" name="RecordTemplate" 
                            template="{{ '{% if Branding == "Rebellion" %}
<img src="https://starwarsblog.starwars.com/wp-content/uploads/2015/11/rebel-symbol-536x536.jpg" alt="Rebellion" width="100" height="100">
{% else %}
<img src="https://starwarsblog.starwars.com/wp-content/uploads/2016/02/imperialseal-536x536.jpg" alt="Empire" width="100" height="100">
{% endif %}' }}"></platform-component>
    </sp-record-row>     
    <sp-record-row>
      <span slot="label">Image</span>
      <platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{Image}}" alt="{{name}}" width="200" height="200">' }}"></platform-component>
    </sp-record-row>
  </div>
  </sp-responsive-columns>
  </sp-tab-panel>
  
  <sp-tab-panel name="aircraft-parts">
    </sp-tab-panel> 
   
       <sp-tab-panel name="fleet-assignments">
    </sp-tab-panel> 
  </sp-tabs>

{% endblock body %}