<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk+" version="3.10"/>
  <template class="GsAppContextBar" parent="GtkBox">
    <property name="homogeneous">True</property>
    <property name="spacing">0</property>
    <property name="visible">True</property>
    <property name="can-focus">True</property>
    <style>
      <class name="linked"/>
    </style>

    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="homogeneous">True</property>

        <child>
          <object class="GtkButton" id="storage_tile">
            <property name="visible">True</property>
            <signal name="clicked" handler="tile_clicked_cb"/>
            <style>
              <class name="context-tile"/>
              <class name="flat"/>
            </style>
            <child>
              <object class="GtkBox">
                <property name="orientation">vertical</property>
                <property name="spacing">8</property>
                <property name="visible">True</property>
                <child>
                  <object class="GtkBox" id="storage_tile_lozenge">
                    <property name="halign">center</property>
                    <property name="visible">True</property>
                    <style>
                      <class name="context-tile-lozenge"/>
                      <class name="grey"/>
                    </style>
                    <child>
                      <object class="GtkLabel" id="storage_tile_lozenge_content">
                        <property name="halign">center</property>
                        <!-- this is a placeholder: the text is actually set in code -->
                        <property name="label">20 MB</property>
                        <property name="visible">True</property>
                        <property name="xalign">0.5</property>
                        <accessibility>
                          <relation target="storage_tile_title" type="labelled-by"/>
                          <relation target="storage_tile_description" type="details"/>
                        </accessibility>
                      </object>
                      <packing>
                        <property name="expand">True</property>
                      </packing>
                    </child>
                  </object>
                  <packing>
                    <property name="fill">False</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkLabel" id="storage_tile_title">
                    <!-- this is a placeholder: the text is actually set in code -->
                    <property name="label">Download Size</property>
                    <property name="visible">True</property>
                    <property name="wrap">True</property>
                    <property name="xalign">0.5</property>
                    <accessibility>
                      <relation target="storage_tile_lozenge_content" type="label-for"/>
                    </accessibility>
                    <style>
                      <class name="context-tile-title"/>
                    </style>
                  </object>
                </child>
                <child>
                  <object class="GtkLabel" id="storage_tile_description">
                    <property name="justify">center</property>
                    <!-- this is a placeholder: the text is actually set in code -->
                    <property name="label">Needs 150 MB of additional system downloads</property>
                    <property name="visible">True</property>
                    <property name="wrap">True</property>
                    <property name="xalign">0.5</property>
                    <accessibility>
                      <relation target="storage_tile_lozenge_content" type="details-for"/>
                    </accessibility>
                    <style>
                      <class name="context-tile-description"/>
                    </style>
                  </object>
                </child>
              </object>
            </child>
          </object>
        </child>

        <child>
          <object class="GtkButton" id="safety_tile">
            <property name="visible">True</property>
            <signal name="clicked" handler="tile_clicked_cb"/>
            <style>
              <class name="context-tile"/>
              <class name="flat"/>
            </style>
            <child>
              <object class="GtkBox">
                <property name="orientation">vertical</property>
                <property name="spacing">8</property>
                <property name="visible">True</property>
                <child>
                  <object class="GtkBox" id="safety_tile_lozenge">
                    <property name="halign">center</property>
                    <property name="visible">True</property>
                    <style>
                      <class name="context-tile-lozenge"/>
                      <class name="green"/>
                    </style>
                    <child>
                      <object class="GtkImage" id="safety_tile_lozenge_content">
                        <property name="halign">center</property>
                        <!-- this is a placeholder: the icon is actually set in code -->
                        <property name="icon-name">safety-symbolic</property>
                        <property name="visible">True</property>
                        <accessibility>
                          <relation target="safety_tile_title" type="labelled-by"/>
                          <relation target="safety_tile_description" type="details"/>
                        </accessibility>
                      </object>
                      <packing>
                        <property name="expand">True</property>
                      </packing>
                    </child>
                  </object>
                  <packing>
                    <property name="fill">False</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkLabel" id="safety_tile_title">
                    <!-- this is a placeholder: the text is actually set in code -->
                    <property name="label">Safe</property>
                    <property name="visible">True</property>
                    <property name="wrap">True</property>
                    <property name="xalign">0.5</property>
                    <accessibility>
                      <relation target="safety_tile_lozenge_content" type="label-for"/>
                    </accessibility>
                    <style>
                      <class name="context-tile-title"/>
                    </style>
                  </object>
                </child>
                <child>
                  <object class="GtkLabel" id="safety_tile_description">
                    <property name="justify">center</property>
                    <!-- this is a placeholder: the text is actually set in code -->
                    <property name="label">Auditable, no tracking, few permissions</property>
                    <property name="visible">True</property>
                    <property name="wrap">True</property>
                    <property name="xalign">0.5</property>
                    <accessibility>
                      <relation target="safety_tile_lozenge_content" type="details-for"/>
                    </accessibility>
                    <style>
                      <class name="context-tile-description"/>
                    </style>
                  </object>
                </child>
              </object>
            </child>
          </object>
        </child>

      </object>
    </child>

    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="homogeneous">True</property>

        <child>
          <object class="GtkButton" id="hardware_support_tile">
            <property name="visible">True</property>
            <signal name="clicked" handler="tile_clicked_cb"/>
            <style>
              <class name="context-tile"/>
              <class name="flat"/>
            </style>
            <child>
              <object class="GtkBox">
                <property name="orientation">vertical</property>
                <property name="spacing">8</property>
                <property name="visible">True</property>
                <child>
                  <object class="GtkBox" id="hardware_support_tile_lozenge">
                    <property name="halign">center</property>
                    <property name="visible">True</property>
                    <style>
                      <class name="context-tile-lozenge"/>
                      <class name="green"/>
                      <class name="wide-image"/>
                    </style>
                    <child>
                      <object class="GtkImage" id="hardware_support_tile_lozenge_content">
                        <property name="halign">center</property>
                        <!-- this is a placeholder: the icon is actually set in code -->
                        <property name="icon-name">adaptive-symbolic</property>
                        <property name="pixel-size">56</property>
                        <property name="visible">True</property>
                        <accessibility>
                          <relation target="hardware_support_tile_title" type="labelled-by"/>
                          <relation target="hardware_support_tile_description" type="details"/>
                        </accessibility>
                      </object>
                      <packing>
                        <property name="expand">True</property>
                      </packing>
                    </child>
                  </object>
                  <packing>
                    <property name="fill">False</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkLabel" id="hardware_support_tile_title">
                    <!-- this is a placeholder: the text is actually set in code -->
                    <property name="label">Adaptive</property>
                    <property name="visible">True</property>
                    <property name="wrap">True</property>
                    <property name="xalign">0.5</property>
                    <accessibility>
                      <relation target="hardware_support_tile_lozenge_content" type="label-for"/>
                    </accessibility>
                    <style>
                      <class name="context-tile-title"/>
                    </style>
                  </object>
                </child>
                <child>
                  <object class="GtkLabel" id="hardware_support_tile_description">
                    <property name="justify">center</property>
                    <!-- this is a placeholder: the text is actually set in code -->
                    <property name="label">Works on phones, tablets and desktops</property>
                    <property name="visible">True</property>
                    <property name="wrap">True</property>
                    <property name="xalign">0.5</property>
                    <accessibility>
                      <relation target="hardware_support_tile_lozenge_content" type="details-for"/>
                    </accessibility>
                    <style>
                      <class name="context-tile-description"/>
                    </style>
                  </object>
                </child>
              </object>
            </child>
          </object>
        </child>

        <child>
          <object class="GtkButton" id="age_rating_tile">
            <property name="visible">True</property>
            <signal name="clicked" handler="tile_clicked_cb"/>
            <style>
              <class name="context-tile"/>
              <class name="flat"/>
            </style>
            <child>
              <object class="GtkBox">
                <property name="orientation">vertical</property>
                <property name="spacing">8</property>
                <property name="visible">True</property>
                <child>
                  <object class="GtkBox" id="age_rating_tile_lozenge">
                    <property name="halign">center</property>
                    <property name="visible">True</property>
                    <style>
                      <class name="context-tile-lozenge"/>
                      <class name="details-rating-18"/>
                    </style>
                    <child>
                      <object class="GtkLabel" id="age_rating_tile_lozenge_content">
                        <property name="halign">center</property>
                        <!-- this is a placeholder: the text is actually set in code -->
                        <property name="label">18+</property>
                        <property name="visible">True</property>
                        <property name="xalign">0.5</property>
                        <accessibility>
                          <relation target="age_rating_tile_title" type="labelled-by"/>
                          <relation target="age_rating_tile_description" type="details"/>
                        </accessibility>
                      </object>
                      <packing>
                        <property name="expand">True</property>
                      </packing>
                    </child>
                  </object>
                  <packing>
                    <property name="fill">False</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkLabel" id="age_rating_tile_title">
                    <!-- this one’s not a placeholder -->
                    <property name="label" translatable="yes">Age Rating</property>
                    <property name="visible">True</property>
                    <property name="wrap">True</property>
                    <property name="xalign">0.5</property>
                    <accessibility>
                      <relation target="age_rating_tile_lozenge_content" type="label-for"/>
                    </accessibility>
                    <style>
                      <class name="context-tile-title"/>
                    </style>
                  </object>
                </child>
                <child>
                  <object class="GtkLabel" id="age_rating_tile_description">
                    <property name="justify">center</property>
                    <!-- this is a placeholder: the text is actually set in code -->
                    <property name="label">May contain sex, drugs, rock‘n’roll and more</property>
                    <property name="visible">True</property>
                    <property name="wrap">True</property>
                    <property name="xalign">0.5</property>
                    <accessibility>
                      <relation target="age_rating_tile_lozenge_content" type="details-for"/>
                    </accessibility>
                    <style>
                      <class name="context-tile-description"/>
                    </style>
                  </object>
                </child>
              </object>
            </child>
          </object>
        </child>

      </object>
    </child>
  </template>

  <object class="GtkSizeGroup" id="app_context_bar_size_group">
    <property name="mode">vertical</property>
    <widgets>
      <widget name="storage_tile_lozenge"/>
      <widget name="safety_tile_lozenge"/>
      <widget name="hardware_support_tile_lozenge"/>
      <widget name="age_rating_tile_lozenge"/>
    </widgets>
  </object>
</interface>
