templates/index.html.twig line 1

1. {% extends 'base.html.twig' %}
3. {% block content %}
5.     <div class="bx--row mt-7">
6.         <div class="bx--col text-right">
7.             <img src="{{ asset('images/ncstox-logo.png') }}" style="width: 260px;margin-right: -10rem;margin-top: 1rem;" alt="">
8.         </div>        
9.         <div class="bx--col">
10.             
11.             <div class="m-6 text-center font-xl bold">
12.                 <span style="color:#ABA9BC">NCS</span><span style="color:#FF866B">TOX</span>
13.             </div>
14.         </div>
15.         <div class="bx--col">
16.         </div>
17.     </div>
19.     <div class="bx--row">
20.         <div class="bx--col">
21.                 {% for label, messages in app.flashes %}
22.                 {% for message in messages %}
23.                     <bx-inline-notification title="Notification" subtitle="{{ message }}" kind="error" style="width: 100%;max-width: 100%;">
24.                     </bx-inline-notification>
25.                 {% endfor %}
26.             {% endfor %}
27.         </div>
28.     </div>
30.     <div class="bx--row">
31.         <div class="bx--col">
32.             
33.             <div class="bx--row">
34.                 <div class="bx--col">
35.                     <h2 class="mb-3" style="color:#0f62fe;">
36.                         <strong>
37.                             Substance search
38.                         </strong>
39.                     </h2>
40.                 </div>
41.             </div>
43.             <form method="GET" action="{{ path('app_search') }}" data-controller="search submit" data-action="turbo:submit-end->search#reset" data-turbo="false">
45.                 <bx-form-item
46.                     class="d-block"
47.                     data-controller="autocomplete"
48.                     data-autocomplete-url-value="{{ path('app_molecule_lookup') }}">
50.                     <div class="bx--row">
51.                         <div class="bx--col-md-6">
52.                             
53.                             <bx-input 
54.                                 type="text" 
55.                                 data-autocomplete-target="input"
56.                                 data-search-target="molecule"
57.                                 data-action="input->autocomplete#change"
58.                                 autocomplete="off">
59.                                 <span slot="label-text">Substance name or CAS number</span>
60.                                 <span slot="helper-text">Type few letters and select among choice list</span>
61.                             </bx-input>
62.                             <bx-inline-loading  status="" style="align-self: end; width: 2rem;  position: relative; top:-2.625rem;"></bx-inline-loading>
63.                             <ul class="lookup-list" data-autocomplete-target="datalist" style="position: relative;margin-top:0;top:-52px;width:100%;">
64.                             </ul>
65.                             <input type="hidden" name="search[molecule_uuid]" data-autocomplete-target="id"></input>
67.                         </div>
68.                         <div class="bx--col-md-2">
70.                             <bx-radio-button-group
71.                                 style="position:relative;top:2rem;"
72.                                 id="autocomplete-search-mode"
73.                                 label-position="right"
74.                                 orientation="horizontal"
75.                                   name="search[mode]"
76.                                   value="start">
77.                                 <bx-radio-button label-text="Molecule name starting with..." value="start" checked></bx-radio-button>
78.                                  <bx-radio-button label-text="Molecule name containing..." value="inside" style="margin-left:1rem;"></bx-radio-button>
79.                             </bx-radio-button-group>
81.                         </div>
82.                     </div>
84.                 </bx-form-item> 
86.                 <bx-form-item class="d-block mb-3">
87.                     <bx-combo-box label-text="Molecular group" trigger-content="Filter..." name="search[molecular_group]" data-search-target="molecularGroup">
88.                         {% for item in molGroupList %}
89.                             <bx-combo-box-item value="{{ item.molgroup }}">{{ item.molgroup }}</bx-combo-box-item>
90.                         {% endfor %}
91.                     </bx-combo-box>
92.                 </bx-form-item>
94.                 <bx-form-item
95.                     class="d-block mb-3"
96.                     data-controller="autocomplete"
97.                     data-autocomplete-url-value="{{ path('app_plant_lookup') }}">
98.                     <bx-input 
99.                         type="text" 
100.                         data-autocomplete-target="input"
101.                         data-action="input->autocomplete#change"
102.                         autocomplete="off"
103.                         data-search-target="plant">
104.                         <span slot="label-text">Plant Name</span>
105.                         <span slot="helper-text">Type few letters and select among choice list</span>
106.                     </bx-input>
107.                     <bx-inline-loading data-autocomplete-target="loading" status="" style="align-self: end; width: 2rem;  position: relative; top:-2.625rem;"></bx-inline-loading>
108.                     <ul class="lookup-list" data-autocomplete-target="datalist" style="position: relative;margin-top:0;top:-20px;width:100%;">
109.                     </ul>
110.                     <input 
111.                         type="hidden" 
112.                         name="search[plant_uuid]" 
113.                         data-autocomplete-target="id"></input>
114.                 </bx-form-item> 
116.                 <bx-btn type="submit" kind="primary" data-action="click->search#submit">Submit</bx-btn>
118.             </form>
120.         </div>
121.     </div>
123.     <!--
124.     <div class="bx--row">
125.         <div class="bx--col">
126.             <div class="card card-green-deep">
127.                 <div class="card-header">
128.                     Search Molecule
129.                 </div>
130.                 <div class="card-body">
131.                     <div class="pt-2">
132.                         <form>
133.                             
134.                             <bx-form-item class="d-block mb-3">
135.                                 <bx-search label-text="Search Molecule" placeholder="Molecule name or cas number"></bx-search>
136.                                 <div class="mt-1">Type few letters and select among choice list</div>
137.                             </bx-form-item>
139.                             <div class="text-right">
140.                                 <bx-btn type="submit" kind="primary">
141.                                     submit
142.                                 </bx-btn>                                
143.                             </div>
145.                         </form>                            
146.                     </div>
147.                 </div>                    
148.             </div>
149.         </div>
150.         <div class="bx--col">
151.             <div class="card card-green-deep">
152.                 <div class="card-header">
153.                     Search family
154.                 </div>
155.                 <div class="card-body">
156.                     <div class="pt-2">
157.                         <form>
158.                             
159.                             <bx-form-item class="d-block mb-3">
161.                                 <bx-select placeholder="Optional placeholder text">
162.                                     <bx-select-item value="all">Option 1</bx-select-item>
163.                                 </bx-select>
165.                             </bx-form-item>
167.                             <div class="text-right">
168.                                 <bx-btn type="submit" kind="primary">
169.                                     submit
170.                                 </bx-btn>                                
171.                             </div>
173.                         </form>                            
174.                     </div>
175.                 </div>                    
176.             </div>
177.         </div>
178.         <div class="bx--col">
179.             
180.         </div>
181.     </div>
182.     -->
183. {% endblock content %}