1 files changed, 80 insertions, 0 deletions
diff --git a/src/gs-age-rating-context-dialog.ui b/src/gs-age-rating-context-dialog.ui
new file mode 100644
index 0000000..d3b601e
--- /dev/null
+++ b/src/gs-age-rating-context-dialog.ui
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk+" version="3.10"/>
+  <template class="GsAgeRatingContextDialog" parent="GsInfoWindow">
+    <property name="title" translatable="yes" comments="Translators: This is the title of the dialog which contains information about the suitability of an app for different ages.">Age Rating</property>
+    <child>
+      <object class="AdwPreferencesPage">
+        <child>
+          <object class="AdwPreferencesGroup">
+
+            <child>
+              <object class="GtkBox">
+                <property name="orientation">vertical</property>
+                <property name="spacing">8</property>
+
+                <child>
+                  <object class="GtkBox">
+                    <property name="margin-top">20</property>
+                    <property name="margin-bottom">16</property>
+                    <property name="margin-start">20</property>
+                    <property name="margin-end">20</property>
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">12</property>
+
+                    <child>
+                      <object class="GsLozenge" id="lozenge">
+                        <property name="circular">True</property>
+                        <style>
+                          <class name="large"/>
+                          <class name="grey"/>
+                        </style>
+                        <accessibility>
+                          <relation name="labelled-by">title</relation>
+                        </accessibility>
+                      </object>
+                    </child>
+
+                    <child>
+                      <object class="GtkLabel" id="title">
+                        <!-- this is a placeholder: the text is actually set in code -->
+                        <property name="justify">center</property>
+                        <property name="label">Shortwave is appropriate for children</property>
+                        <property name="wrap">True</property>
+                        <property name="xalign">0.5</property>
+                        <style>
+                          <class name="title-2"/>
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkListBox" id="attributes_list">
+                    <property name="selection_mode">none</property>
+                    <property name="halign">fill</property>
+                    <property name="valign">start</property>
+                    <style>
+                      <class name="boxed-list"/>
+                    </style>
+                    <!-- Rows are added in code -->
+                    <placeholder/>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkLinkButton">
+                    <property name="label" translatable="yes">How to contribute missing information</property>
+                    <property name="margin-top">16</property>
+                    <property name="uri">https://gitlab.gnome.org/GNOME/gnome-software/-/wikis/software-metadata#age-rating</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>